在業務上需要使用iframe嵌入頁面的話，很多邏輯和樣式需要通過父子頁面間的通信來進行調整，本文主要從實踐上介紹使用postMessage進行iframe父子頁面間的通信
一、postMessage基本語法
otherWindow.postMessage(message, targetOrigin, [transfer]);
-
otherWindow
其他窗口的一個引用，比如iframe的contentWindow屬性、執行window.open返回的窗口對象、或者是命名過或數值索引的window.frames。
-
message
將要發送到其他 window的數據。它將會被結構化克隆算法序列化。這意味着你可以不受什麼限制的將數據對象安全的傳送給目標窗口而無需自己序列化。
-
targetOrigin
通過窗口的origin屬性來指定哪些窗口能接收到消息事件，其值可以是字符串""（表示無限制）或者一個URI。在發送消息的時候，如果目標窗口的協議、主機地址或端口這三者的任意一項不匹配targetOrigin提供的值，那麼消息就不會被髮送；只有三者完全匹配，消息纔會被髮送。這個機制用來控制消息可以發送到哪些窗口；例如，當用postMessage傳送密碼時，這個參數就顯得尤爲重要，必須保證它的值與這條包含密碼的信息的預期接受者的orign屬性完全一致，來防止密碼被惡意的第三方截獲。如果你明確的知道消息應該發送到哪個窗口，那麼請始終提供一個有確切值的targetOrigin，而不是。不提供確切的目標將導致數據泄露到任何對數據感興趣的惡意站點。
-
transfer
是一串和message 同時傳遞的 Transferable 對象. 這些對象的所有權將被轉移給消息的接收方，而發送一方將不再保有所有權。
二、子頁面向父頁面發消息
通過監聽message改變觸發回調函數
這裏需要注意在組件銷燬前需要移除這個監聽，否則這個監聽會一直存在，每次創建組件都會創建多一次監聽
，vue中移除監聽要注意每個參數都需要對上，否則會移除失敗
-
可實現實時調整iframe高度適配
可以在iframe高度變化時向父頁面發送實時高度值，父頁面獲取消息並實時調整高度
-
可實現父頁面路由跳轉，麪包屑的實時適配
在點擊事件中向父頁面發送消息，父頁面可以在回調函數中設置實現這些需求
三、 父頁面向子頁面發消息
父頁面通過獲取iframe標籤，設置postMessage方法即可
-
可實現實時獲取父窗口滾動條高度，使iframe內的彈窗高度適配