当前所在位置: 首页 > 站长之家

html5关于外链嵌入页面通信问题

2021-03-05 本站作者 【 字体:

这篇文章主要介绍了html5关于外链嵌入页面通信问题(postMessage解决跨域通信),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧


说起来挺简单的,可以直接去查询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解决跨域通信)的文章就介绍到这了,更多相关html5外链嵌入通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!


来源:脚本之家


阅读全文
相关推荐

老站长纷纷转型,流量困境下,我们该何去何从?

老站长纷纷转型,流量困境下,我们该何去何从?
831600.com报道:昨天晚上,收到松哥(卢松松)直播的提醒,我就点进去了,...

撕开小红书流量15个入口,你不知道的流量秘密(内附实操6000字攻略)

撕开小红书流量15个入口,你不知道的流量秘密(内附实操6000字攻略)
831600.com报道:在此,我们就说说这个关联推荐,再加上之前的小红书流量脉...

为什么需要在SEO优化营销中使用视频素材?

为什么需要在SEO优化营销中使用视频素材?
831600.com报道:人们被视频吸引。由于没有人有时间阅读文本,因此公司需要...

新网站如何做SEO优化?做SOE优化有哪些技巧?

新网站如何做SEO优化?做SOE优化有哪些技巧?
831600.com报道:网站上线之后首先会收录一个首页。开始有一个或者两个星期...

一天引流300+月入1万的项目变现实操详解

一天引流300+月入1万的项目变现实操详解
831600.com报道:几天前,我在朋友圈中发布了一段引流效果的视频。学员使用...

做什么网站赚钱 分享5个适合普通的个人网站

做什么网站赚钱 分享5个适合普通的个人网站
831600.com报道:目录类型网站 网站目录、分类目录网站类型虽然看似没有多...

反向链接对SEO的作用

反向链接对SEO的作用
831600.com报道:很多新手站长在做SEO的时候不知道反向链接的意思和对S...

seo前景如何?就业前景怎么样?

seo前景如何?就业前景怎么样?
831600.com报道:有一个事实,那就是任何行业,处于金字塔顶端的人是极少的...

SEO搜索引擎优化的几个重点

SEO搜索引擎优化的几个重点
831600.com报道:搜索引擎优化简称就是seo优化,搜索引擎优化是利用搜索...

B2B网站如何做好SEO优化

B2B网站如何做好SEO优化
831600.com报道:B2B网站是商家与商家的平台,SEO要引的便是买家与卖...