碰到了一个跨域iframe父子页面方法互调的问题,网上查了下使用H5自带的postMessage可解决问题,这里填下坑,分析下如何应用。
A.html页面是父页面
B.html页面是子页面
1、A页面要调B页面的方法
在A页面中传递参数方法如下:
document.getElementById('childPage').contentWindow.postMessage({data:obj},"*");
其中*表示在任何域可用,即不限定域跨域传参。
在B页面中写监听函数
window.addEventListener('message', function (e) {
console.log(e.data);
var data=e.data;
if(data.data){
fun(data.data);
}
}, false);
其中fun()是B页面的方法。
2、B页面要调A页面的方法
其实与上面方法一样,在A页面写监听函数监听B页面传过来的参数,B页面中写传递参数的方法。
本文详细解析了跨域iframe通信的实现方式,通过postMessage方法,解决了父子页面间方法互相调用的问题。A页面作为父页面,通过document.getElementById调用contentWindow.postMessage方法向B子页面传递参数;B页面作为子页面,使用addEventListener监听来自A页面的消息,从而实现方法的调用。反之,B页面亦可通过相同方式向A页面传递消息。
&spm=1001.2101.3001.5002&articleId=95087200&d=1&t=3&u=f2d31291daca44c3beb95a476f322d7a)
3370

被折叠的 条评论
为什么被折叠?



