iframe父页与子页通信

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_36361038/article/details/82560445

一、同域通信:

父页获取子页中的iframe标签,在根据iframe标签获取子页的window对象,再调用子页中的JS方法来对子页进行一系列的操作。

同理父页面中操作子页面也是同样的。

注意:我们通过父页面操作子页面最好不要直接操作子页面的DOM等内容,而是通过方法操作子页的内容,子页操作父页的数据也是一样的。

1、父页面调用子页面方法:FrameName.window.childMethod();

 //$("#editFrame")[0].contentWindow

2、子页面调用父页面方法:window.parent.window.parentMethod();

注意事项

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

1. iframe上用onload事件

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


二、跨域通信

如果涉及到不同的域的通信就不能直接使用上面的这种方式

1、父页面到子页面之间的通信方式:

实现的技巧就是利用 location 对象的 hash 值,通过它传递通信数据,我们只需要在父页面设置 iframe的 src 后面多加个#data 字符串(data就是你要传递的数据),然后在 子页面 中通过某种方式能即时的获取到这儿 data 就可以了,其实常用的一种方式就是:
a. 在 子页面 中通过 setInterval 方法设置定时器, 监听 location.href 的变化即可获得上面的 data 信息
b. 然后 子页面 就能根据这个 data 信息进行相应的逻辑处理。

2、子页面到父页面之间的通信方式:

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

猜你喜欢

转载自blog.csdn.net/qq_36361038/article/details/82560445