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>

 

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://www.cnblogs.com/beileixinqing/p/16423586.html

抽奖动画_鲤鱼跳龙门_nd-编程思维

pageClass: home-page-class 鲤鱼跳龙门动画 1. 需求 年中618营销活动要求做一个鲤鱼跳龙门的动画,产品参考了支付宝上的一个动画,要求模仿这个来做一个类似的动画。产品提供的截屏视频如下: 图1 从这个视频里得到的信息,我们可以把动画分解一下: 321倒计时结束,动画开始播放。 小河背景向下滚

如何定义 java 的回调函数,与 javascript 回调函数的区别_shiramashiro-编程思维

JavaScript 中的回调函数 在 JavaScript 中经常使用回调函数,比如:get 请求、post 请求等异步任务。在我们请求之前以及请求之后,都需要完成一些固定的操作,比如:请求之前先从浏览器中创建 XMLHttpRequests 对象,完成之后关闭请求,释放资源等。等这些固定操作完成之后,可能需要我们根

javascript扩展原型链浅析_程序员布欧-编程思维

前言 上文对原型和原型链做了一些简单的概念介绍和解析,本文将浅析一些原型链的扩展。 javaScript原型和原型链http://lewyon.xyz/prototype.html 扩展原型链 使用new操作符 利用原型是对象的特性,实例化对象的时候,继承多个构造函数的属性和方法 兼容性:支持目前以及所有可想象到的