用 Post Messge 实现跨域、跨窗口通讯

跨域跨窗口通讯有不少方案均可以解决，今天咱们来讲说如何使用 Post Messgejavascript

基本使用

发送消息java

otherWindow.postMessage(message, targetOrigin, [transfer]);
复制代码

otherWindow 是指其余窗口的一个引用好比：跨域

iframe 的 contentWindow属性
执行 window.open 返回的窗口对象
是命名过或数值索引的 window.frames 等

关键其实在于 otherWindow 或者叫作 targetWindow 更加准确，是指你要发送信息的目标页面的 window 对象，直接 window.postMessage() 调用的当前窗口的 window 对象，至关于本身给本身发，目标页固然接收不到了。关于 targetWindow 的获取根据弹出方式不一样分为两种markdown

弹出 iframe 使用 window.top 或者 window.parent 来获取，两者的区别在于 window.parent 返回当前窗口的直接父对象，而 window.top 返回最顶层的窗口对象
window.open() 打开新窗口使用 window.opener 获取

接收消息oop

window.addEventListener('message', function (e) {
    console.log(e.data);
}, false)
复制代码

应用场景

假设咱们有这样一个需求：post

A页面有一个登陆按钮，点击后打开一个新窗口B(A，B页面不一样源)，新窗口B页面内输入帐号秘密验证后，通知A窗口已经登陆成功。ui

// A页面  
// 1. 监听 message 事件，监听事件会掉
// 2. 点击按钮，打开窗口
<body>
    <button id='login'>去登陆</button>
    <script> let newWindow login.onclick=function(){ newWindow = window.open('./b.html','Login Page','height=400,width=400,top=20,left=20') } window.addEventListener('message', function (e) { if(e.data==='login success'){ console.log('登陆成功') newWindow?.close() // 关闭新窗口 } }, false) </script>
</body> 
 
 
 
// B页面
<body>
    <button id="loginSuccess">点击登陆</button>
    <script> let targetWindow = window.opener; // 获取打开此页面的window对象 loginSuccess.onclick=function(){ targetWindow.postMessage('login success', '*') // 第二个参数可指定发送的目标URL,*表明全部 } </script>
</body>
复制代码

若是B窗口打开方式是在A页面内打开Iframe，那么 targetWindow 是 window.parent 而不是 window.openerspa

用 Post Messge 实现 跨域、跨窗口 通讯

基本使用

应用场景

用 Post Messge 实现跨域、跨窗口通讯