这里是文章模块栏目内容页
iframe子页面给父页面发送消息实现数据传递

很多时候受制于跨域限制,父页面的domain和iframe子页面的domain不一致

浏览器判断两者是跨域调用,这种情况,iframe页面里不能通过parent对象

调用父 页面中的js方法和数据。


解决的办法是采用  window.parent.postMessage(data, '*');

对,postMessage 方法,在子页面中调用此方法,给浏览器广播一条消息,消息的数据是data,

星号*表示父页面的domain 不限制。

在父页面中,通过 window.addEventListener('message', function(data){ ……});
在ie11下的版本 window.attachEvent('onmessage', function(data){ ……});

addEventListener 是标准的浏览器支持事件监听方法,现在的浏览器几乎都支持。


在回调函数 中获取到的data 数据,就是iframe子页面发送来的数据。


好了,这就是iframe子页面实现跨域父页面进行数据通信的方法。

然而,父页面传递数据给iframe子页面,目前最可靠的办法是通过url中的参数传递吧。

要是在js中动态传递好像还没有更好的办法。


更多栏目
相关内容