使用iframe+postMessage实现页面跨域通讯

时间 2020-01-13

标签使用 iframe+postmessage iframe postmessage 实现页面通讯栏目 HTML 繁體版

原文原文链接

一般状况下，对于两个不一样页面的脚本，只有当执行它们的页面位于具备相同的协议（一般为https），端口号（443为https的默认值），以及主机时，这两个脚本才能相互通讯。而在实际项目开发过程当中，常常会利用iframe在一个父页面中嵌入另一个子页面，或者在一个父页面中弹出另外一个页面，因为同源策略的限制，父子页面之间的脚本没法实现通讯，而使用postMessage方法就实现了父子页面之间的跨域信息传递。html

语法：算法

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow:其余页面的引用，例如，iframe的contentWindow属性，或者执行window.open返回的窗口对象。
message:将要传递到另外一个页面的数据（能够不受限制的将数据对象安全的传送给目标窗口而无需本身序列化，缘由是由于采用告终构化克隆算法）。
targetOrigin:经过窗口的origin属性来指定哪些窗口能接收到消息事件,其值能够是一个字符串"*"（表示无限制）或者一个Url。只有当目标窗口的协议、主机地址、端口号和targetOrigin彻底匹配时，目标窗口才会收到message信息。为了防止信息泄露，一般状况下都会指定特定的url。
transfer：可选参数。
使用方法：
1.父页面：(url为http://www.b.com/main.html)：跨域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父页面</title>
</head>
<body>
    <iframe id="child" src="http://www.a.com/iframepage.html"></iframe>
    <script>
        window.onload = function(){
            document.getElementById("child").contentWindow.postMessage("主页面传递的消息","http://www.a.com/iframepage.html")
        }
        window.addEventListener('message', function(event){  //父获取子传递的消息
            if(event.origin == "http://www.a.com"){
                //能够在这里作一些逻辑操做
            }
        }, false)
    </script>
</body>
</html>

2.子页面(url为http://www.a.com/iframepage.h...安全

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子页面</title>
</head>
<body>
    <div>这里是子页面</div>
    <script>
        window.addEventListener('message', function(event){
           if(event.origin == "http://www.b.com"){
                //能够在这里作一些操做
                top.postMessage("子页面收到父页面传递来的消息", 'http://www.b.com/main.html')//子页面向父页面传递消息
           }
        }, false);
    </script>
</body>
</html>

postMessage方法被调用时，会在全部页面脚本执行完毕以后像目标窗口派发一个 MessageEvent 消息，该MessageEvent消息有四个属性须要注意：
type：表示该message的类型
data：为postMessage的第一个参数
origin：表示调用postMessage方法窗口的源
source：记录调用postMessage方法的窗口对象post

特别注意：
1.必定要等A页面嵌入的B页面加载完成以后，再进行postMessage跨域通讯
2.必定要对origin作判断，去掉不是来自咱们目标窗口的origin，防止来自其余origin的攻击url