浏览器窗口间跨域通讯的解决方案

时间 2019-11-08

原文原文链接

使用场景

在后台管理系统中，好比常见的OA系统，常常会使用iframe 多页签的布局方式，以下图：
html

每每页签A操做后须要更新页签B的数据，如页签A建立新记录后要刷新页签B的列表。A、B若是处于同一域，更新的方式有不少，很容易解决。可是A、B不在同域时，跨域通讯就变成一个难题了。算法

H5 postMessage

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

基本语法：安全

otherWindow.postMessage(message, targetOrigin);

otherWindow：
dom

其余窗口的一个引用，好比iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。下列方式均可以获取到 otherWindow ：
一、 Window.open 布局

二、Window.opener post

三、HTMLIFrameElement.contentWindow 3d

四、Window.parent Window.frames +索引值code

message：
cdn

将要发送到其余 window的数据。它将会被结构化克隆算法序列化。这意味着你能够不受什么限制的将数据对象安全的传送给目标窗口而无需本身序列化。

targetOrigin：

经过窗口的origin属性来指定哪些窗口能接收到消息事件，其值能够是字符串"*"（表示无限制）或者一个URI。在发送消息的时候，若是目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者彻底匹配，消息才会被发送。这个机制用来控制消息能够发送到哪些窗口；例如，当用postMessage传送密码时，这个参数就显得尤其重要，必须保证它的值与这条包含密码的信息的预期接受者的origin属性彻底一致，来防止密码被恶意的第三方截获。若是你明确的知道消息应该发送到哪一个窗口，那么请始终提供一个有确切值的targetOrigin，而不是*。不提供确切的目标将致使数据泄露到任何对数据感兴趣的恶意站点。

代码示例

1.html

</ head >

< body >

< div >

向IFrame发送消息：< input type = "button" value = "发送" id = "btnSend" >

</ div >

< div >

< iframe src = "2.html" frameborder = "0" id = "iframe1" ></ iframe >

</ div >

< script >

var btnSend = document.getElementById('btnSend')

var iframe1 = document.getElementById('iframe1')

btnSend.onclick=function () {

iframe1.contentWindow.postMessage('给子窗口传递的消息', '*')

}

// 接收子窗体 iframe 的消息

window.addEventListener('message', function (event) {

console.log('接收到：' + event.data)

})

</ script >

</ body >

</ html >

2.html

<!DOCTYPE html>

< html lang = "en" >

< head >

< meta charset = "UTF-8" >

< title >PostMessage Demo</ title >

</ head >

< body >

< div >

< p >子窗口</ p >

</ div >

< script >

// 接收父窗体传递的消息

window.addEventListener('message', function (event) {

console.log('接收到：' + event.data)

window.parent.postMessage('给父窗口传递的消息', '*')

})

</ script >

</ body >

</ html >

本文转载自：www.limitcode.com/detail/5dab…