使用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