サブページがjqueryファイルをインポートしない場合は、親ページのjqueryオブジェクトセレクタを使用します.
Webページを作成するときに、親ページparent.htmlでiframeネストされたサブページsub.htmlを使用します.
最初は両方のページにjquery.min.jsのファイルが同時にインポートされ、両方のページでjqueryのオブジェクトを使用できます.
しかしparent.htmlをブラウズすると同じjquery.min.jsが2回ロードされ、負担になりそうです.
だから私はparent.htmlにjquery.min.jsのファイルを一度インポートしてparent.htmlとsub.htmlで使用することを望んでいます.
以下に実験のコードを示します.
親ページ:parent.html
サブページ:sub.html
最初はこう書きました
ただし、「テスト」ではなく空の値が出力されます.
原因はsub.htmlを解析するとき、上から下へ実行するからでしょう.
だからpタグも見つからない
その後javascriptコードの位置を変更してbodyラベルの下に移動してみました.
出力された結果は「テスト」で、まさに私が望んだ結果です.
そしてまたやってみた
同様に「テスト」を出力すると、
そのためjavascriptのコードをbodyに書いた後、bodyの内容が完全に生成されてからjqueryのコードを実行してこそ、所望の結果を実現することができる.
追加のテスト:
最初は両方のページにjquery.min.jsのファイルが同時にインポートされ、両方のページでjqueryのオブジェクトを使用できます.
しかしparent.htmlをブラウズすると同じjquery.min.jsが2回ロードされ、負担になりそうです.
だから私はparent.htmlにjquery.min.jsのファイルを一度インポートしてparent.htmlとsub.htmlで使用することを望んでいます.
以下に実験のコードを示します.
親ページ:parent.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript" src="jquery.min.js"></script>
</head>
<body>
<iframe src="sub.html"></iframe>
</body>
</html>
サブページ:sub.html
最初はこう書きました
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>sub.html</title>
<script>
var $ = parent.window.$;
$(document).ready(function(){
var body= $("body",document);
var p = body.find("p");
var text = p.text();
alert(text);
})
</script>
</head>
<body>
<p> </p>
</body>
</html>ただし、「テスト」ではなく空の値が出力されます.
原因はsub.htmlを解析するとき、上から下へ実行するからでしょう.
var body= $("body",document);// だからpタグも見つからない
その後javascriptコードの位置を変更してbodyラベルの下に移動してみました.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>sub.html</title>
</head>
<body>
<p> </p>
</body>
<script>
var $ = parent.window.$;
$(document).ready(function(){
var body= $("body",document);
var p = body.find("p");
var text = p.text();
alert(text);
})
</script>
</html>出力された結果は「テスト」で、まさに私が望んだ結果です.
そしてまたやってみた
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>sub.html</title>
</head>
<body>
<p> </p>
</body>
<script>
var $ = parent.window.$;
var body= $("body",document);
var p = body.find("p");
var text = p.text();
alert(text);
</script>
</html>同様に「テスト」を出力すると、
$(document).ready()// そのためjavascriptのコードをbodyに書いた後、bodyの内容が完全に生成されてからjqueryのコードを実行してこそ、所望の結果を実現することができる.
追加のテスト:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>sub.html</title>
</head>
<body>
<p> 1</p>
<p> 2</p>
<p> 3</p>
<p> 4</p>
<p> 5</p>
</body>
<script>
var $ = parent.window.$;
var body= $("body",document);
var p = body.find("p");
p.each(function(){
alert($(this).text());
})
</script>
</html>