html5中怎么解决外链嵌入页面通信问题

这篇文章给大家分享的是有关html5中怎么解决外链嵌入页面通信问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联建站专业为企业提供安宁网站建设、安宁做网站、安宁网站设计、安宁网站制作等企业网站建设、网页设计与制作、安宁企业网站模板建站服务,十余年安宁做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。


使用postMessage推送和window.addEventListener接收
原理:

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

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

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

开始

iframe引入页面(我也是使用这样方式)

父页面(发送方)



    点击
    
    点击       

关于发送简单解释一波:

这里里面的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反馈

感谢各位的阅读!关于“html5中怎么解决外链嵌入页面通信问题”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


分享名称:html5中怎么解决外链嵌入页面通信问题
网页路径:http://pwwzsj.com/article/iedihg.html