window.postMessage(跨源通信)

最新推荐文章于 2025-04-16 17:07:26 发布

super舒楠

最新推荐文章于 2025-04-16 17:07:26 发布

阅读量6.9k

点赞数

文章标签： html5 前端框架程序人生

本文链接：https://blog.youkuaiyun.com/weixin_44922480/article/details/127602436

版权

在开发中我们会遇到因为不同域的原因造成无法互相发送信息，这时就可以通过window.postMessage()来实现；例如在一个页面中嵌入iframe页面，此刻就需要用到跨源通信。

先来说说什么是跨源通信，由于浏览器的同源限制,只有在相同协议、ip以及端口号的两个页面才能相互通信。而window.postMessage()采取了某种机制规避这种限制,可以实现安全的跨源通信。

如何发送信息？

发送消息通过Window.postMessage(message, targetOrigin, [transfer])

方法
Window.postMessage(message, targetOrigin, [transfer])

三个参数的意义：
message
发送到其他window的信息
targetOrigin
发送信息的目标url，如果没有指定目标url用字符串*表示；但是为了安全，如果你知道目标url建议使用目标url。
transfer(可选参数)
是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

如何接收信息？

Window.postMessage(message, targetOrigin, [transfer])这个方法只是单纯的将信息进行了发送（发送到window)，接收信息需要通过window进行监听，并且发送过来的数据都保存在message中：

监听的方法
window.addEventListener(“message”, receiveMessage, false);

message有三个属性：
data
从其他 window 中传递过来的对象。
orgin
通过Window.postMessage()发送过来的源地址
source
对发送消息的窗口对象的引用; 您可以使用此来在具有不同 origin 的两个窗口之间建立双向通信。

看实例：

在1.html文件中触发Window.postMessage()将数据发送到2.html文件中，并通过点击事件进行赋值。
在这里插入图片描述

触发前：

在这里插入图片描述

触发后：

在这里插入图片描述

测试代码：

1.html:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .fa {
        width: 100px;
        height: 100px;
        background: yellow;
    }
</style>
<body>
    <div class="fa">  
        窗口1
        <button onclick="btn()">调用postMessage</button>
    </div>
    <iframe src="./2.html" frameborder="1" id='123' name="abc"></iframe>
    <script>
        function btn() {
            window.top.postMessage({ content: '通过窗口1发送的数据'}, '*')
        }
    </script>
</body>
</html>

2.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>窗口2</div>
    <span class="text"></span>
    <script>
        top.addEventListener('message',(e)=>{
            let spanText = document.querySelector('.text')
            // 接收窗口1的 window.postMessage() 发送的数据，比并给 span 标签赋值
            spanText.innerHTML = e.data.content
            console.log(e);
        },false)
    </script>
</body>
</html>