当前位置: 首页 > Web前端 > HTML

实现两个窗口通信方法-postMessage

时间:2023-04-02 18:47:15 HTML

postMessageotherWindow:对其他窗口的引用,例如iframe的contentWindow属性,执行window.open返回的window对象,或者命名或数字索引的window.frames。message:要发送给其他窗口的数据。它将被结构化克隆算法序列化。这意味着您可以安全地将数据对象无限制地传输到目标窗口,而无需自己序列化它们。targetOrigin:使用窗口的origin属性指定哪些窗口可以接收消息事件,它的值可以是一个字符串“”(表示无限制)或者一个URI。发送消息时,如果目标窗口的协议、主机地址或端口中有任何一个与targetOrigin提供的值不匹配,消息将不会被发送;只有当三者完全匹配时,消息才会被发送。该机制用于控制消息可以发送到哪些窗口;例如,当postMessage用于传输密码时,该参数尤为重要,其值必须与包含密码的消息的预期接收者的origin属性完全一致。防止密码被恶意第三方截获。如果您确切知道应该将消息发送到哪个窗口,请始终提供一个具有确切值的targetOrigin。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。transfer:它是一串与消息一起传递的Transferable对象。这些对象的所有权将转移给消息的接收者,而发送者将不再保留所有权。消息数据的一些属性:从其他窗口传过来的对象。origin:调用postMessage时消息发送窗口的来源。该字符串由协议、“://”、域名和“:端口号”连接而成。例如“https://example.org(隐含端口443)”、“http://example.net(隐含端口80)”、“http://example.com:8080”。请注意,此原点不能保证是窗口的当前或未来原点,因为postMessage在被调用后可能会导航到不同的位置。source:对发送消息的窗口对象的引用;您可以使用它在两个不同来源的窗口之间建立双向通信。实现通信demo://a.com/index.html//b.com/index.html