iframe子与父js通讯方式

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战javascript

在写微前端时登录页是iframe来写的登录这就须要iframe通讯。html

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

同域下父子页面的通讯

父页面 parent.htmljava

<html>
<head>
    <meta charset="utf-8"/>
    <script type="text/javascript"> function say() { alert("parent.html------>I'm at parent.html"); } function callChild() { //document.frames["myFrame"].window.say();//只适用于ie浏览器 myFrame.window.say(); myFrame.window.document.getElementById("button").value = "我变了"; } </script>
</head>
<body>
    <input type=button value="调用child.html中的函数say()" onclick="callChild()">
    <iframe name="myFrame" src="child.html"></iframe>
</body>
</html>
复制代码

子页面 child.html跨域

<html>
<head>
    <script type="text/javascript"> function say() { alert("child.html--->I'm at child.html"); } function callParent() { parent.say(); parent.window.document.getElementsByName("myFrame")[0].style.height = "100px"; } </script>
</head>
<body>
    <input id="button" type=button value="调用parent.html中的say()函数" onclick="callParent()">
</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"来判断markdown

2、跨域父子页面通讯方法

若是iframe所连接的是外部页面，由于安全机制则不能使用同域名下的通讯方式了。框架

父页面向子页面传递数据

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

在子页面中经过 setInterval 方法设置定时器，监听 location.href 的变化便可得到上面的 data 信息
而后子页面就能根据这个 data 信息进行相应的逻辑处理。

子页面向父页面传递数据

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