本篇内容主要讲解“javascript中postMessage的用法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“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), '*');
}
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的用法”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
