postMessage使用

参考自文档：https://www.runoob.com/js/met-win-postmessage.html

postMessage 方法用于安全地实现跨域通信。

涉及到通信，则会有信息发送方 和 信息接收方。

发送方，调用 postMessage 方法，发送 message ，接收方，在 window 下监听 message 方法，接受传来的数据。

<!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>postMessage</title>
    </head>
    <body>
        <div>
            <input id="text" type="text" value="Runoob" />
            <button id="sendMessage1">发送消息1</button>
            <button id="sendMessage2">发送消息2</button>
        </div>
        <iframe
            loading="lazy"
            id="receiver"
            src="./postmessageget.html"
            width="300"
            height="360"
        >
            <p>你的浏览器不支持 iframe。</p>
        </iframe>
        <script>
            // message 发送：postmessage方法调用者：谁需要数据，谁调用
            // message 接收：window下监听 message 事件
            window.onload = function () {
                let val = document.getElementById("text").value;
                // 发送消息1 iframe
                let receiver = document.getElementById("receiver").contentWindow; // 得到就是 iframe 的 window 对象
                let btn1 = document.getElementById("sendMessage1");
                btn1.addEventListener("click", function (e) {
                    e.preventDefault();
                    // postmessage.html:33 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://c.runoob.com') does not match the recipient window's origin ('http://127.0.0.1:5500').
                    // receiver.postMessage("Hello " + val + "！", "https://c.runoob.com"); // 限制 targetOrgin 之后，如果该 iframe  src不为指定域名，则无法发送 数据
                    receiver.postMessage("Hello " + val + "111", "*"); // * 可以发送成功
                });

                //  发送消息2   window.open ，会同时打开 postmessageget 网页
                let otherWindow = window.open("./postmessageget.html");
                let btn2 = document.getElementById("sendMessage2");
                btn2.addEventListener("click", function (e) {
                    e.preventDefault();
                    otherWindow.postMessage("Hello " + val + "222", "*"); // * 可以发送成功
                });
            };
            window.addEventListener("message", function (e) {
                console.log("父页面收到：", e.data);
            });
        </script>
    </body>
</html>

 

postmessage.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>window.postMessage() 跨域消息传递测试</title>
    </head>
    <body>
        <div id="recMessage">Hello World!</div>
        <script>
            window.onload = function () {
                var messageEle = document.getElementById("recMessage");
                window.addEventListener("message", function (e) {
                    console.log("e", e);
                    messageEle.innerHTML =
                        "从" + e.origin + "收到消息： " + JSON.stringify(e.data);
                    console.log("子页面收到：", e.data);
                    let top = window.top;
                    top.postMessage("子页面说你好");
                });
            };
        </script>
    </body>
</html>

 

posted @ 2022-06-29 15:28  蓓蕾心晴  阅读(1432)  评论(0)  编辑  收藏  举报