HTML跨域iframe父子方法互调(postMessage)

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

你可能感兴趣的:(前端)