你对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基础教程

以上就是你对javascript中的postMessage怎么用吗?的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2708026.html

(0)

关于作者

上一篇 2025年3月7日 20:17:10
下一篇 2025年2月19日 20:23:43

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论