现在的位置: 首页 > 综合 > 正文

实现iframe与iframe父层的数据交互

2012年11月27日 ⁄ 综合 ⁄ 共 1194字 ⁄ 字号 评论关闭

介绍:

在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);

   })();

抱歉!评论已关闭.