javascript中的postMessage
Posted mcgrady
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript中的postMessage相关的知识,希望对你有一定的参考价值。
父页面、子页面,两页面不同域,之间对话用到了postMessage。下面为了方便统称为F、C页。
C页按钮的点击事件向F页发送一个消息小C,F页收到消息小C执行逻辑LC,LC执行完毕,F页向C页发送一个消息小F,C页收到消息小F执行逻辑LF。一句话,就是F、C页间相互通信。
可以认为
类似于react中的父子组件通信。
C页js代码:
var btnObj = document.getElementById(\'buttons\');
btnObj.onclick = function(){
var defaultAdData = {
type:\'advert\',
gameData:{
adId: \'123\'
}
};
window.parent.postMessage(JSON.stringify(defaultAdData), \'*\');
/*我是错误代码:
var receiveMessage = function(event) {
var datas = JSON.parse(event.data);
if (datas.type === "adGivePrize"&&datas.givePrize) {
alert(‘click’);
}
}
window.addEventListener("message", receiveMessage, false);*/
}
/*我是正确代码:
var receiveMessage = function(event) {
var datas = JSON.parse(event.data);
if (datas.type === "adGivePrize"&&datas.givePrize) {
alert(‘click’);
}
}
window.addEventListener("message", receiveMessage, false);*/
F页js代码:
var receiveMessage = function(event) {
var datas = JSON.parse(event.data);
if (datas.type === "advert") {
var postIframeData = {
type:\'adGivePrize\',
givePrize:true
};
//iframe发送信息~~~~
window.frames[0].postMessage(JSON.stringify(postIframeData), \'*\');
}
}
window.addEventListener("message", receiveMessage, false);
总之,此方法提供了两个不相干页面的通信,使得外建的项目或者内嵌的iframe,可以互相通信
以上是关于javascript中的postMessage的主要内容,如果未能解决你的问题,请参考以下文章
javascript postMessage - 测试消息的接收
无法使用 Google 代码在“DOMWindow”上执行“postMessage”
javascript 滚动扩展 - postMessage - Stroeer
保护 Javascript 同源 postMessage 调用和消息监听器,这就够了吗?
HTML5 postMessage 和 onmessage API 具体应用
解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度(JavaScript)