介绍:
在iframe中无法操作父页面,父页面也无法访问到iframe内部的节点。iframe层无法使用父层的公用方法等问题的解决方法。
想要实现的功能:
1.在子页面中引入jquery.js,在父页面中可以应用。(或子页面想要使用父页面的jquery.js或其他公用方法)
2.在子页面可以通过jquery选择器访问到并操作父页面的节点。
3.在父页面中可以通过jquery选择器访问到并操作子页面的节点。
代码:
a.htm 如下
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>a.html</title> </head> <body> <div id="a"> <iframe id="archives" src="b.htm" frameborder="0"></iframe> </div> <script src="js/a.js"></script> </body> </html>
b.htm如下
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>a.html</title> </head> <body>
<div id="b"> 我是iframe里面的内容 </div> <script src="js/jquery.js"></script> <script src="js/b.js"></script> </body> </html>
实现方式:
a.js如下
/* 实现iframe层与iframe父层的数据交互 * * 在页面加载完之后,才能收到iframe层传过来的jquery.
* 使用从iframe层传过来的jquery的时候,$选择器默认都在iframe层查找, * 如果iframe的父层想要使用$选择器,需要在使用的时候填写$选择器的第二个参数context为自身的document. * 示例:$('#main'),如果#main在iframe层的外部。应该写为$('#main',document).
*/
window.onload=function(){
// 在父页面中访问父页面的节点:
// $('#a',document);
// 在父页面中访问子页面的节点:
// $('#b');
}
b.js如下:
/* * iframe层与iframe父层的数据交互。 */ (function(){ //把iframe层的jquery传送给iframe的父层。 window.top.$ = window.$;
//定义Gloabal,Gloabal包涵所有的全局函数。页面加载时需要Global传送给iframe的父层。 window.top.Global = window.Global = {};
//在子页面中访问并操作父页面的节点。
$('#a',window.top.document);
})();