项目中,iframe内部的子页面要使用父页面的方法,如果不跨域,那么直接通过parent.func()就可以直接调用了。但如果子页面和父页面跨域了,就需要用html5的postMessage方法来进行通信和传输数据,间接性的在父页面调用方法。
以子页面向父页面通信为例:
子页面中
parent.postMessage(postParam,'*');
/*
data:顾名思义,是传递来的message
source:发送消息的窗口对象
origin:发送消息窗口的源(协议+主机+端口号)
*/
父页面中这样接收
window.addEventListener('message', function(e) {
console.log(e.data)
}, false);
ie8兼容
1、绑定监听事件需兼容
由于ie8中不兼容addEventListener()这种事件监听方式,所以需要这样来绑定
if (window.addEventListener) {
window.addEventListener('message', function(e){});
} else if (window.attachEvent) {
//for ie
window.attachEvent('onmessage', function(e){});
}
2、子页面向父页面传的数据为json字符串,即JSON.stringify后的字符串内容
需要用window.eval() 或 new Function(){} 的方式解析 JSON 格式字符串。
json1 = eval("(" + jsonStr + ")")
json2 = (new Function("return " + jsonStr))()