html5关于外链嵌入页面通信问题(postMessage解决跨域通信)

站长资源 2024/12/29 佚名

2 0 1

说起来挺简单的，可以直接去查询postMessage推送和window.addEventListener接收使用方式，能自己搞明白是最好的，本文章也只是记录一下自己的使用方式
使用postMessage推送和window.addEventListener接收
原理：

发送方使用postMessage方法向接收方推送消息，第一个参数为推送的内容，第二个参数是允许被访问的域名；

接收方通过监听message的方法接收数据。

实现跨域就需要有两个不同源的服务器咯

开始

iframe引入页面（我也是使用这样方式）

父页面（发送方）

<script>
//这里是发送监听
        function btnClick(params) {
            console.log(1111)
            var iframe = document.getElementById("childframe")
            iframe.contentWindow.postMessage({
                text:'你收到了没有呀（白天）',
                action : 'light'  // action : 自定义动作参数，用于接受收消息是的判断
             }, 'http://localhost:8000/#/');
           
        }
   
        function btnClick2(params) {
            console.log(2222)
            var iframe = document.getElementById("childframe")
            iframe.contentWindow.postMessage({
                text:'你收到了没有呀（黑夜）',
                action : 'dark'  // action : 自定义动作参数，用于接受收消息是的判断
             }, 'http://localhost:8000/#/');
             
    //这是接收子页面返回的监听（当时也是被各种文章搞的很懵圈呀，如果只父页面发送消息不需要在接收子页面的反馈可以不用写这些）
     window.addEventListener('message', function (e) {
            alert(e.data)
            const data = e.data;
            console.log(data,'接到你的页面了data')
        }) 
            //下面这些都是踩过的坑
            // var iwindow = iframe.contentWindow;
            // var idoc = iwindow.document;
            //  console.log("window",iwindow);//获取iframe的window对象
            //  console.log("document",idoc); //获取iframe的document
            //  console.log("html",idoc.documentElement);//获取iframe的html
            //  console.log("head",idoc.head); //获取head
            //  console.log("body",idoc.body); //获取body
            // console.log(window.frames['myframe'].window)
        }
    </script>
<body>
    <button onclick="btnClick()">点击</button>
    <br/>
    <button onclick="btnClick2()">点击</button>
 
    <iframe name="myframe" src ="http://localhost:8000/#/home1?type=light" id="childframe" width="1400px" height="800px">
</body>

关于发送简单解释一波：

<iframe name="myframe" src ="http://localhost:8000/#/home1?type=light" id="childframe" width="1400px" height="800px">

这里里面的src是子页面的地址（这里是根据你自己写的路由或者那个页面要监听写的地址）。

postMessage({ text:'你收到了没有呀（黑夜）', action : 'dark' }, 'http://localhost:8000/#/')

第一个参数是内容，第二是子页面的地址，这里可以只写项目地址就可以还有写的（例如：postMessage(‘内容’, '')），我是没试过但应该也可以。

子页面（接收方+反馈）

我这边接收是直接在我但react项目里写的

 componentWillMount() {
    window.addEventListener('message', (e) => {
      console.log(e)
      let data= e.data //这就是接收到的数据
                       //e.origin这是发送数据的地址
   })
   
   ...
   ...
   ...
   //关于反馈我是在我项目里写了一个点击动作发送的如下
   goCustomerDetail=(data)=>{
    let url = data.url
            // window.top.postMessage({
            //     text:'返回Url',
            //     url:url
            // }, 'http://XXX:8083/ceshi/ceshi.html')
            
            window.top.postMessage('{"name":"客户详情","path":"'+url+'"}', '*')
    }

关于上面接收反馈解释一波：
1、接收 window.addEventListener('message', (e) => {console.log(e) })
其中e是整个接收到的消息体里面有很多内容，自己拿使用的数据，注意这里应该加判断符合条件后在进行一些操作
2、发送方式，我自己实验两种反馈，父页面都能收到
注意是用 window.top.postMessage反馈

结束

总结：这个方式还是很好用的，可以不同技术栈通信外链，但是安全方面不是很好，而且需要会出现跨域问题数据请求不到或者接口被拦截，需要自己打开接口设置一波继续访问。

附赠：还有其它方式的引入我自己没用过，参考链接分享

https://www.jianshu.com/p/fb579be635b2
https://www.cnblogs.com/Jry666/p/8418643.html
https://blog.csdn.net/monkindey/article/details/23659387

html5,外链嵌入,页面通信,postMessage,跨域通信

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“html5关于外链嵌入页面通信问题(postMessage解决跨域通信)”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月29日

html5关于外链嵌入页面通信问题(postMessage解决跨域通信)

canvas实现图片镜像翻转的2种方式

HTML5跳转小程序wx-open-launch-weapp的示例代码

评论“html5关于外链嵌入页面通信问题(postMessage解决跨域通信)”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接