子页面不导入jquery文件的情况上使用父页面的jquery对象选择器 _Web前端

子页面不导入jquery文件的情况下使用父页面的jquery对象选择器

在做网页的时候，父页面 parent.html 中用到了iframe嵌套一个子页面 sub.html

刚开始的时候这两个页面都同时导入了 jquery.min.js 的文件，这样两个页面都可以使用jquery的对象

但是当浏览 parent.html 的时候会加载同一个 jquery.min.js 两次，这样貌似累赘了。

所以我希望就是在 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>

1 楼车涛锋 2012-08-10

lz 这个例子合适吗我怎么照着做了之后还是不合适啊

2 楼车涛锋 2012-08-10

对不起是谷歌浏览器不弹出对话框请问有解决方法吗