window.postMessage 详细讲解

柯腾啊2024-03-20 14:46

什么是 window.postMessage

由于浏览器同源策略的限制，通常情况下，两个不同的页面，需要同时满足协议、端口、主机三者相同，才可以相互通信，否则就会出现跨域的情况。window.postMessage() 方法可以安全地实现跨源通信。它提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

怎么使用 window.postMessage

JavaScript 复制代码 
otherWindow.postMessage(message, targetOrigin, [transfer]);
  • otherWindow：目标窗口的一个引用，比如 iframe 的 contentWindow 属性、执行window.open返回的窗口对象；
  • message：将要发送到其他 window 的数据。类型可以是字符串，也可以是对象；
  • targetOrigin：消息可以发送到哪些窗口的路径地址，其值可以是字符串"*"（表示无限制）或者一个 URI。

注意：在发送消息的时候，如果目标窗口的协议、主机地址和端口这三者的任意一项不匹配 targetOrigin 提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口；例如，当用 postMessage 传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的 origin 属性完全一致，来防止密码被恶意的第三方截获。*如果明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的 targetOrigin，而不是 。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。

  • transfer「可选」：（不怎么经常使用）

window.postMessage 的使用场景

演示环境：在 vscode 中，用 Live Server 插件分别启动两个服务，每个服务的端口不一样，可以模拟非同源的环境，每个页面是一个独立的服务，每个服务会在浏览器中代表一个窗口。

现在，就模拟A窗口( http://127.0.0.1:5500/post-message/A.html )和 B窗口( http://127.0.0.1:5501/src/examples/B.html )之间的通信情况。

A窗口给自己传输信息

HTML 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>A页面</div>
    <button onclick="sendMessage()">Send Message</button>

    <!-- 点击Send Message 按钮，将会显示下面内容-->
    <div>
        <div id='span1'></div>
        <div id='span2'></div>
        <div id='span3'></div>
    </div>

    <script>   
        function sendMessage() {
            const message = 'Info from A';
            window.postMessage(message, 'http://127.0.0.1:5500');
        }

        // 监听 message 的变化
        window.addEventListener('message', (e) => {
            document.getElementById('span1').innerHTML = e.data // 作为第一个参数传递给postMessage的数据
            document.getElementById('span2').innerHTML = e.origin // 发送消息的来源，可以根据origin来确保期望的发送者
            document.getElementById('span3').innerHTML = e.source // 发送消息的window代理对象
        })
    </script>
</body>
</html>

效果：

A 窗口打开 B 窗口，B 发送信息给 A

A页面：

HTML 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>A页面</div>
    <button onclick="sendMessage()">Send Message</button>

    <!-- 点击Send Message 按钮，将会显示下面内容-->
    <div>
        <div id='span1'></div>
        <div id='span2'></div>
        <div id='span3'></div>
    </div>

    <script>   
        function sendMessage() {
            let open = window.open('http://127.0.0.1:5501/src/examples/B.html', 'B');
        }

        // 监听 message 的变化
        window.addEventListener('message', (e) => {
            if (e.origin === 'http://127.0.0.1:5501') { // （安全判断）接收来自 http://127.0.0.1:5501 网页的信息
                document.getElementById('span1').innerHTML = e.data // 作为第一个参数传递给postMessage的数据
                document.getElementById('span2').innerHTML = e.origin // 发送消息的来源，可以根据origin来确保期望的发送者
                document.getElementById('span3').innerHTML = e.source // 发送消息的window代理对象
            }
        })
    </script>
</body>
</html>

B 页面：

HTML 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>B页面</div>

    <script>
        let opener = window.opener;
        // 只有 http://127.0.0.1:5500 网页打开的页面，才可以收到来自 B 页面的信息
        opener.postMessage('Info in B', 'http://127.0.0.1:5500');  
    </script>
</body>
</html>

效果：

A 窗口打开 B 窗口，A 发送信息给 B

A页面：

HTML 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>A页面</div>
    <button onclick="sendMessage()">Send Message</button>

    <!-- 点击Send Message 按钮，将会显示下面内容-->
    <div>
        <div id='span1'></div>
        <div id='span2'></div>
        <div id='span3'></div>
    </div>

    <script>   
        function sendMessage() {
            let open = window.open('http://127.0.0.1:5501/src/examples/B.html', 'B');
            let message = 'Info in A';
            open.postMessage(message, 'http://127.0.0.1:5501');
        }
    </script>
</body>
</html>

B页面：

HTML 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>B页面</div>
    <div>
        <div id='span1'></div>
        <div id='span2'></div>
        <div id='span3'></div>
    </div>

    <script> 
        // 监听 message 的变化
        window.addEventListener('message', (e) => {
            if (e.origin === 'http://127.0.0.1:5500') { // 接收来自 http://127.0.0.1:5500 网页的信息
                document.getElementById('span1').innerHTML = e.data // 作为第一个参数传递给postMessage的数据
                document.getElementById('span2').innerHTML = e.origin // 发送消息的来源，可以根据origin来确保期望的发送者
                document.getElementById('span3').innerHTML = e.source // 发送消息的window代理对象
            }
        })
    </script>
</body>
</html>

效果：当通过 A 页面打开 B 页面的时候，其实在 B 页面闪现一下，然后就没有了（过程很快，建议自己 codding 试一下，这里就不截图了）。分析这个效果：

引用MDN的一句话：

Window 接口的 open() 方法将 URL 作为参数，并将其识别的资源加载到新的或现有的标签页或窗口中。 请注意，远程 URL 不会立即加载。当 window.open() 返回时，窗口总是包含 about:blank。URL 的实际获取是延迟进行的，并在当前脚本块执行完毕后开始。窗口创建和引用资源的加载是异步进行的。

也就是说，A 中的数据已经传输到 B 中，但此时 B 页面可能还没有被加载出来。那就把 postMessage放在一个宏任务中吧，保证调用栈中 windows.open()中的 url 被加载好之后，再去执行 postMessage 中的逻辑。

看下面代码:

A页面：

HTML 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>A页面</div>
    <button onclick="sendMessage()">Send Message</button>

    <!-- 点击Send Message 按钮，将会显示下面内容-->
    <div>
        <div id='span1'></div>
        <div id='span2'></div>
        <div id='span3'></div>
    </div>

    <script>   
        function sendMessage() {
            let open = window.open('http://127.0.0.1:5501/src/examples/B.html', 'B');
            let message = 'Info in A';
            setTimeout(() => { // 新增代码
                open.postMessage(message, 'http://127.0.0.1:5501');
            }, 1000)
        }
    </script>
</body>
</html>

此时，B 页面就可以接收到数据了。

当然，也有其他方法，思路就是：我们的目标就是A 窗口打开 B 窗口，A 发送信息给 B。那么，只要做到，A 打开 B（此时还不传输数据），然后 B 给 A 一个反馈，然后 A 再把信息传输给 B即可。代码如下：

A页面：

HTML 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>A页面</div>
    <button onclick="sendMessage()">Send Message</button>

    <div>
        <div id='span1'></div>
        <div id='span2'></div>
        <div id='span3'></div>
    </div>

    <script>
        let copyOpen = null;
        function sendMessage() {
            copyOpen = window.open('http://127.0.0.1:5501/src/examples/B.html', 'B');
        }

        // 监听 message 的变化
        window.addEventListener('message', (e) => {
            if (e.origin === 'http://127.0.0.1:5501') { // 接收来自 http://127.0.0.1:5501 网页的信息
                copyOpen.postMessage('Info in A', 'http://127.0.0.1:5501');  // 此时才给 B 传输信息

                document.getElementById('span1').innerHTML = e.data // 作为第一个参数传递给postMessage的数据
                document.getElementById('span2').innerHTML = e.origin // 发送消息的来源，可以根据origin来确保期望的发送者
                document.getElementById('span3').innerHTML = e.source // 发送消息的window代理对象          
            }
        })
    </script>
</body>
</html>

B页面：

HTML 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>B页面</div>
    <div>
        <div id='span1'></div>
        <div id='span2'></div>
        <div id='span3'></div>
    </div>

    <script> 
        let opener = window.opener;
        opener.postMessage('来自 B 的反馈' ,'http://127.0.0.1:5500');
        
        // 监听 message 的变化
        window.addEventListener('message', (e) => {
            if (e.origin === 'http://127.0.0.1:5500') { // 接收来自 http://127.0.0.1:5500 网页的信息
                document.getElementById('span1').innerHTML = e.data // 作为第一个参数传递给postMessage的数据
                document.getElementById('span2').innerHTML = e.origin // 发送消息的来源，可以根据origin来确保期望的发送者
                document.getElementById('span3').innerHTML = e.source // 发送消息的window代理对象
            }
        })
    </script>
</body>
</html>

效果图：

最后

码字不易，大家可以点赞、收藏、加关注~

（下期预告，在Iframe里使用window.postMessage）

相关推荐
良木林10 分钟前
JavaScript书写基础和基本数据类型
开发语言·前端·javascript
工业甲酰苯胺7 小时前
TypeScript枚举类型应用：前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang7 小时前
我操，终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了！
前端·后端·架构
止观止7 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms7 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登7 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in8 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4169 小时前
HTML面试题
前端·html
张可9 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课10 小时前
React 路由懒加载入门：提升首屏性能的第一步
前端·react.js·前端框架
热门推荐
01全球最强模型Grok4，国内已可免费使用！（附教程）02KGG转MP3工具|非KGM文件|解密音频03Coze扣子平台完整体验和实践（附国内和国际版对比）04基于odoo17的设计模式详解---单例模式05使用Ruby接入实时行情API教程06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07LOT: 通过逻辑增强大型语言模型的零样本Chain-of-Thought推理能力08集群聊天服务器---MySQL数据库的建立09DeepSeek各版本说明与优缺点分析10《深入设计模式》模式结构汇总