首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2012-11-09 
子页面不导入jquery文件的情况下使用父页面的jquery对象选择器在做网页的时候,父页面 parent.html 中用到

子页面不导入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   对不起   是谷歌浏览器不弹出对话框   请问有解决方法吗

热点排行
Bad Request.