html5 postMessage解决跨域、跨窗口消息传递

2023-12-22 18:40:33

一些麻烦事儿

平时做web开发的时候关于消息传递，除了客户端与服务器传值还有几个经常会遇到的问题

1.页面和其打开的新窗口的数据传递

2.多窗口之间消息传递

3.页面与嵌套的iframe消息传递

4.上面三个问题的跨域数据传递

postMessage

Cross-document messaging 这玩意的支持率98.9%。好像还能发送文件，哈哈，强大。
不过仔细一看 window.postMessage()，就注定了你首先得拿到window这个对象。也注定他使用的限制，两个窗体必须建立起联系。常见建立联系的方式：

window.open
window.opener
iframe

提到上面的window.open, open后你能获得被打开窗体的句柄，当然也可以直接操作窗体了

demo 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>A</title>
</head>
<body>
    <h1>A 页面</h1>
    <button type="button" onclick="openB()">B</button>
    <script>
        window.name = 'A'
        function openB() {
            window.open("B.html?code=123", "B")
        }
        window.addEventListener("message", function(e) {console.log(e.data)}, false);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B</title>
    <button type="button" onclick="sendA()">发送A页面消息</button>
</head>
<body>
    <h1>B 页面</h1>
    <span></span>
    <script>
        window.name = 'B'
        function sendA() {
            let targetWindow = window.opener
            targetWindow.postMessage('Hello A', "http://127.0.0.1:5500/");
        }
    </script>
</body>
</html>

码农公寓

一些麻烦事儿

postMessage

相关文章