帝王谷资源网

html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
网页制作 2024/12/31 佚名
3 2
帝王谷资源网 Design By www.wdxyy.com

说起来挺简单的，可以直接去查询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,跨域通信
帝王谷资源网 Design By www.wdxyy.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
www.wdxyy.com 帝王谷资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/12/31

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接