​iframe​框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接，有明显不同的通信方式，同域下的数据交换和DOM元素互访就简单的多了，而跨域的则需要一些巧妙的方式来实现通信。

一、同域下父子页面的通信

​父页面 Parent.aspx​

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Parent.aspx.cs" Inherits="ReSenGuang.admin.iframeDemo.Parent" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>

    <script type="text/javascript">
        function parentSay() {
            alert("Parent.aspx------>I'm at Parent.aspx");
        }
        
        function callChild()
        {
            //document.frames["myFrame"].window.say();//只适用于ie浏览器
            myFrame.window.childSay();
            myFrame.window.document.getElementById("button").value="我变了";
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" value="调用Child.aspx中的函数childSay()" onclick="callChild()">
        <iframe name="myFrame" src="Child.aspx"></iframe>
    </div>
    </form>
</body>
</html>


​子页面 Child.aspx​

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Child.aspx.cs" Inherits="ReSenGuang.admin.iframeDemo.Child" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>

    <script type="text/javascript">
        function childSay() {
            alert("Child.aspx--->I'm at Child.aspx");
        }
        function callParent() {
            parent.parentSay();
            parent.window.document.getElementsByName("myFrame")[0].style.color = "red";
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="button" type="button" value="调用Parent.aspx中的parentSay()函数" onclick="callParent()">
    </div>
    </form>
</body>
</html>


​方法调用​


如上面示例所示父页面调用子页面的方法可通过：FrameName.window.childMethod();(这种方式兼容各种浏览器)

子页面调用父页面的方法：parent.window.parentMethod();


DOM元素访问


根据FrameName.window得到了子窗口对象之后，再访问其中的DOM元素就跟访问同一页面中的DOM元素没区别了都可以通过 document.getElementById(),document.getElementsByName()[index]。 如：parent.window.document.getElementsByName("myFrame") [0],myFrame.window.document.getElementById("button")其中的window都是可以省略的。


注意事项


要确保在Iframe加载完成后再进行操作，如果Iframe还未加载完成就开始调用里面的方法或变量，无疑会产生错误。判断Iframe是否加载完毕有两种方法：

1.在Iframe上用onload事件;

2.用document.readyState=="complete"来判断


二、跨域父子页面通信方法


如果iframe所链接的是外部页面，因为安全机制则不能使用同域名下的通信方式了。在《SNS平台与第三方APP的JS通信实现》中提供易于且具有通用性的通信方式。


父页面向子页面传递数据


实现的技巧就是利用 location 对象的 hash 值，通过它传递通信数据，我们只需要在父页面设置 iframe的 src 后面多加个#data 字符串（data就是你要传递的数据），然后在 子页面 中通过某种方式能即时的获取到这儿 data 就可以了，其实常用的一种方式就是：

1. 在 子页面 中通过 setInterval 方法设置定时器， 监听 location.href 的变化即可获得上面的 data 信息

2. 然后 子页面 就能根据这个 data 信息进行相应的逻辑处理。


子页面向父页面传递数据


实现的技巧就是利用一个代理 Iframe C，它嵌入到 子页面中，并且和父页面必须保持是同域，然后我们通过它充分利用上面第一种通信方式的实现原理就能把 子页面的数据传递给 iframeC，接下来的问题就是怎么让iframeC把数据传递给主页面A ，因为，iframeC 和主页面是同域的，所以它们之间传递数据就变得简单多了，属于同域名下的通信问题了，如前面所讨论的，在这里的可以使用一个经常使用的属性 window.top (也可以使用window.parent.parent)，它返回对载入浏览器得最顶层 window 对象的引用，这样我们就能直接条用父页面中方法啦。


参考：


1.《SNS平台与第三方APP的JS通信实现》作者：Springwang。

2.iframe父子窗口间js方法调用 作者：moreorless。

3.IFrame问题汇总作者：dengwf


​方法调用​

如上面示例所示父页面调用子页面的方法可通过：FrameName.window.childMethod();(这种方式兼容各种浏览器)

子页面调用父页面的方法：parent.window.parentMethod();

DOM元素访问

根据FrameName.window得到了子窗口对象之后，再访问其中的DOM元素就跟访问同一页面中的DOM元素没区别了都可以通过 document.getElementById(),document.getElementsByName()[index]。 如：parent.window.document.getElementsByName("myFrame") [0],myFrame.window.document.getElementById("button")其中的window都是可以省略的。

注意事项

要确保在Iframe加载完成后再进行操作，如果Iframe还未加载完成就开始调用里面的方法或变量，无疑会产生错误。判断Iframe是否加载完毕有两种方法：

1.在Iframe上用onload事件;

2.用document.readyState=="complete"来判断

二、跨域父子页面通信方法

如果iframe所链接的是外部页面，因为安全机制则不能使用同域名下的通信方式了。在《SNS平台与第三方APP的JS通信实现》中提供易于且具有通用性的通信方式。

父页面向子页面传递数据

实现的技巧就是利用 location 对象的 hash 值，通过它传递通信数据，我们只需要在父页面设置 iframe的 src 后面多加个#data 字符串（data就是你要传递的数据），然后在 子页面 中通过某种方式能即时的获取到这儿 data 就可以了，其实常用的一种方式就是：

1. 在 子页面 中通过 setInterval 方法设置定时器， 监听 location.href 的变化即可获得上面的 data 信息

2. 然后 子页面 就能根据这个 data 信息进行相应的逻辑处理。

子页面向父页面传递数据

实现的技巧就是利用一个代理 Iframe C，它嵌入到 子页面中，并且和父页面必须保持是同域，然后我们通过它充分利用上面第一种通信方式的实现原理就能把 子页面的数据传递给 iframeC，接下来的问题就是怎么让iframeC把数据传递给主页面A ，因为，iframeC 和主页面是同域的，所以它们之间传递数据就变得简单多了，属于同域名下的通信问题了，如前面所讨论的，在这里的可以使用一个经常使用的属性 window.top (也可以使用window.parent.parent)，它返回对载入浏览器得最顶层 window 对象的引用，这样我们就能直接条用父页面中方法啦。

参考：

1.《SNS平台与第三方APP的JS通信实现》作者：Springwang。

2.iframe父子窗口间js方法调用 作者：moreorless。

3.IFrame问题汇总作者：dengwf

其它资料：

jquery 父窗口 子窗口 相关操作


作者：Ljhero

本作品采用署名-非商业性使用 3.0协议进行许可。欢迎转载，演绎，但是必须保留本文的署名Ljhero，且不能用于商业目的。

分类: 【06】WEB开发

标签: web​, iframe

绿色通道： 好文要顶 关注我 收藏该文与我联系

​ 嵌入式iframe子页面与父页面js通信方式_父页面 ​

ljhero关注 - 17

粉丝 - 15

+加关注 2 0 (请您对文章做出评价)

« 上一篇：写在毕业答辩之后

» 下一篇：【实践】Windows7下安装配置SubVersion

posted @ 2011-07-09 00:37 ljhero 阅读(10828) 评论(3) 编辑 收藏

评论列表   回复引用 #1楼 2012-10-22 10:40 wodemyworld  

好文章，mark~ 支持(0)反对(0)   回复引用 #2楼 2013-09-12 01:50 ZhouZe  

m 支持(0)反对(0)   回复引用 #3楼 2014-01-02 10:06 ajaxian  

值得好好学习学习 支持(0)反对(0)

刷新评论刷新页面返回顶部

发表评论

昵称：

评论内容：

嵌入式iframe子页面与父页面js通信方式_html_02嵌入式iframe子页面与父页面js通信方式_html_03嵌入式iframe子页面与父页面js通信方式_html_04嵌入式iframe子页面与父页面js通信方式_父页面_05嵌入式iframe子页面与父页面js通信方式_父页面_06嵌入式iframe子页面与父页面js通信方式_加载_07