跨域通信postMessage

基本使用：
otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow：待接收发送消息的窗口对象，如iframe.contentWindow、window.open返回的窗口对象、window.parent、window.top、window.opener等，即发送需要获取接收方的 window 对象
发送到对应窗口的数据，内容将会结构化克隆算法，这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化.
targetOrigin：发送窗口的url、或通配符"*“可发送到任意窗口、发送到与当前窗口同源的窗口可设置为”/"
transfer：是一串和message同时传递的Transferable对象,这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权，详情

window.addEventListener(“message”, 监听回调fn, false) ;

event

data : 指的是从其他窗口发送过来的消息对象;
type: 指的是发送消息的类型;
source: 指的是发送消息的窗口对象;
origin: 指的是发送消息的窗口的源

window.open打开的窗口中使用：

<h1>这是 T1</h1>
<button id="btn1">打开t2</button>
<button id="btn2">发送消息到t2</button>
<pre id="text"></pre><script>var t2var btn1 = document.getElementById('btn1')var btn2 = document.getElementById('btn2')var text = document.getElementById('text')btn1.addEventListener('click', function() {t2 = window.open('/t2.html')//等到发送窗口页面加载完成后才发送消息，否则监听不到t2.window.addEventListener('load', function() {btn2.click()})})btn2.addEventListener('click', function() {console.log('btn2 点击');t2.postMessage({type: 'popring', message: 't1 发送出去的消息'}, '/')})window.addEventListener('message', function(event) {// 过滤非当前域下的消息if(event.origin !== 'http://127.0.0.1:5500' || !event.data) {return}// 过滤其他非本应用传递过来的消息，例如 chrome 的插件就可能也会发送消息（表示 wappalyzer 就会）if(event.data?.type !== 'popring') {return}text.innerText += (JSON.stringify(event.data)+'\n')})
</script>

<h1>这是 T2</h1>
<button id="btn">发送消息到 t1</button>
<pre id="text"></pre><script>var btn = document.querySelector('#btn')var text = document.getElementById('text')var t1// t2 定义的 onload 事件window.onload = function() {console.log('t2 onload');}btn.addEventListener('click', function() {t1.postMessage({type: 'popring', message: 't2 发送出去的消息'}, '/')})window.addEventListener('message', function(event) {if(event.origin !== 'http://127.0.0.1:5500' || !event.data) {return}if(event.data?.type !== 'popring') {return}t1 = event.sourcetext.innerText += (JSON.stringify(event.data)+'\n')})
</script>

iframe中使用：

const iFrame = document.getElementById('iframe')
<!-- 需要等到iframe中的子页面加载完成后才发送消息，否则子页面接收不到消息 -->
iFrame.onload = function(){<!-- iFrame.contentWindow获取到iframe的window对象 -->iFrame.contentWindow.postMessage('父页面发送的消息','http://b.index.com');
}window.addEventListener('message',e=>{<!-- 对消息来源origin做一下过滤，避免接收到非法域名的消息导致的xss攻击 -->if(e.origin==='http://b.index.com'){console.log(e.origin) //子页面URL，这里是http://b.index.comconsole.log(e.source) // 子页面window对象，全等于iframe.contentWindowconsole.log(e.data) //子页面发送的消息}
},false)

子页面接收

window.addEventListener('message',e=>{<!-- 对消息来源origin做一下过滤，避免接收到非法域名的消息导致的xss攻击 -->if(e.origin==='http://a.index.com'){console.log(e.origin) //父页面URL，这里是http://a.index.comconsole.log(e.source) // 父页面window对象，全等于window.parent/window.topconsole.log(e.data)  //父页面发送的消息}
},false)//子页面发送给父窗口
window.parent.postMessage('子页面发送的消息','http://a.index.com')

跨域通信postMessage相关推荐

服务端转发html页面,html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
说起来挺简单的,可以直接去查询postMessage推送和window.addEventListener接收使用方式,能自己搞明白是最好的,本文章也只是记录一下自己的使用方式使用postMessag ...
使用window.postMessage实现跨域通信
JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: document.domain+iframe的设置,应用于主域相同而子域不同: 利用iframe和locati ...
ifrme嵌入外部页面，在外部页面调用本页面方法,window.postMessage实现跨域通信
项目场景:vue页面开发的系统要继承外部系统页面,并且在外部系统页面调用本系统的方法,这样来看的话肯定会存在跨域的问题,而且直接调用方法的话,也不太安全,后来了解到window.postMessage ...
window.postMessage - 前端跨域通信
window.postMessage - 前端跨域通信 window.postMessage() 语法 The dispatched event 安全问题示例注意 HTMLIFrameElemen ...
vue页面内嵌iframe使用postMessage进行跨域通信
跨域关于跨域的详细资料:跨域,这里只需要明确什么情况下跨域了(等同于两个url什么情况下是非同源关系). 协议.域名.端口三者有其一不同,就算是跨域,就算是非同源本地环境模拟借助phpstudy ...
html5跨域通信之postMessage
html5跨域通信之postMessage的用法不同域名下的文档因为安全问题,不允许相互之间文档的访问,但是有的时候却不得不需要这样的操作.因此我们一般可以采用 window.name,hash,或 ...
【JavaScript】父子页面之间跨域通信的方法
由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇"跨域,不再纠结&quo ...
前端跨域通信的几种方式
前言前端通信类的问题,主要包括以下内容: 1.什么是同源策略及限制同源策略是一个概念,就一句话.有什么限制,就三句话.能说出来即可. 2.前后端如何通信如果你不准备,估计也就只能说出ajax. ...
ios 跨域_如何在iOS和Android中建立跨域通信桥
ios 跨域 I was working on a certain project at work, in which I needed to connect several varying comp ...

跨域通信postMessage

跨域通信postMessage相关推荐

最新文章

热门文章