postMessage在网页间传递数据

最新推荐文章于 2024-07-18 09:55:55 发布

Keep it up！！

最新推荐文章于 2024-07-18 09:55:55 发布

阅读量3.1k

点赞数

分类专栏：笔记文章标签： webview android html

本文链接：https://blog.csdn.net/weixin_48885013/article/details/121873352

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文深入探讨了window.postMessage方法在跨源通信中的应用，详细介绍了其工作原理和使用方法。通过示例代码展示了如何在父页面与子页面之间安全地发送和接收消息，强调了消息目标源的安全设定，以及opener属性的使用条件和注意事项。此外，还讨论了window.open()方法在创建新页面中的作用。

摘要由CSDN通过智能技术生成

postMessage

window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage()方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

两页面间协议、域名、端口号相同，才能相互通信

语法

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow: 其他窗口的一个引用。比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。

message: 将要发送到其它window的数据

targetOrigin: 指定哪些窗口可以接收到消息事件，*表示无限制，为了防止被恶意的第三方捕获，一般设为确切的地址

transfer【可选】：是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

传送消息---父页面

postMessage.html

<!DOCTYPE html>
<html lang="zh-CN">
<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>发消息</title>
</head>
<body>
    <textarea name="text"></textarea>
    <button type="button">发送</button>
    <div>打开onmessage接受信息</div>
    <script>
        let textarea = document.querySelector('textarea')
        let btn = document.querySelector('button')
        let div = document.querySelector('div')
        let msgPage = null

        // 给div注册点击事件
        div.onclick = function(){
            window.open('http://127.0.0.1:5500/onmessage.html')  //这里通过open方式打开子页面
        }

        btn.onclick = function(){
            // 发消息 这里的 msgPage 是其它窗口的一个引用
            msgPage && msgPage.postMessage(textarea.value, 'http://127.0.0.1:5500/onmessage.html')
        }

        // 收到消息
        window.addEventListener('message', function(e){
            console.log(e)
            // 消息来源
            msgPage = e.source
            document.title = e.data
            textarea.value = e.data
        })
    </script>
</body>
</html>

接受消息--子页面

onmessage.html

<!DOCTYPE html>
<html lang="zh-CN">
<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>收信息</title>
</head>
<body>
    <textarea name="text"></textarea>
    <button type="button">发送</button>

    <script>
        // 发消息 
        opener && opener.postMessage('新页面打开成功', 'http://127.0.0.1:5500/postMessage.html')

        let textarea = document.querySelector('textarea')
        let btn = document.querySelector('button')

        btn.onclick = function(){
            // 发消息
            console.dir(window)
            opener.postMessage(textarea.value, 'http://127.0.0.1:5500/postMessage.html')
        }

        // 接受消息
        window.addEventListener('message', function(e){
            document.title = e.data
            textarea.value = e.data
        })
    </script>
</body>
</html>