html5有关外部链接置入☏网页页面通讯难题(post

日期:2020-12-11 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

谈起来挺简易的,能够立即去查寻postMessage消息推送和window.addEventListener接受应用方法,能自身搞搞清楚是最好的,文中章也仅仅纪录一下自身的应用方法
应用postMessage消息推送和window.addEventListener接受
基本原理:

推送方应用postMessage方式向接受方消息推送信息,第一个主要参数为消息推送的內容,第二个主要参数是容许被浏览的网站域名;

接受方根据监视message的方式接受数据信息。

完成跨域就必须有2个不一样源的网络服务器咯

刚开始

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处理跨域通讯)的文章内容就详细介绍到这了,大量有关html5外部链接置入通讯內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!