碰到了一个跨域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页面中写传递参数的方法。