サブページがjqueryファイルをインポートしない場合は、親ページのjqueryオブジェクトセレクタを使用します.

3631 ワード

js。 jq。

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

<!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>

JavaScriptはブラウザのカーネルとIEカーネルのバージョンを判断して取得します——ピットを踏んで覚えます

ELKログサービス使用-kafka転送ログ(bbotte.com)