postMessage的使用，跨window交互

在這個月初的項目中，有這麼一個需求，就是react頁面和內嵌的iframe頁面之間存在通信。
期初這個需求還不知道怎麼實現，後來經過百度，發現了postMessage，是可以實現的。
現在做一個簡單的小結：
1.什麼是postMessage，MDN-postMessage
2.發送消息：

const ruleIframe = document.getElementById('ruleIframe'); // 根據iframe的id 獲取當前iframe對象
ruleIframe.contentWindow.postMessage('back','*'); // 當前iframe的當前window 發送消息，消息內容是back

3.接收消息

window.addEventListener('message', function (e){
    var data = e.data;
    if (data == 'back'){ // 獲取消息內容
        window.history.back(-1); // 處理事件
    }
});

其實p的使用還是很簡單的，但是有幾個屬性還是需要注意一下的，這個需要仔細看文檔和實踐。

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

1. otherWindow
   其他窗口的一個引用，比如iframe的contentWindow屬性、執行window.open返回的窗口對象、或者是命名過或數值索引的window.frames。
2. message
   將要發送到其他 window的數據。它將會被結構化克隆算法序列化。這意味着你可以不受什麼限制的將數據對象安全的傳送給目標窗口而無需自己序列化。[1]
3. targetOrigin
   通過窗口的origin屬性來指定哪些窗口能接收到消息事件，其值可以是字符串""（表示無限制）或者一個URI。在發送消息的時候，如果目標窗口的協議、主機地址或端口這三者的任意一項不匹配targetOrigin提供的值，那麼消息就不會被髮送；只有三者完全匹配，消息纔會被髮送。這個機制用來控制消息可以發送到哪些窗口；例如，當用postMessage傳送密碼時，這個參數就顯得尤爲重要，必須保證它的值與這條包含密碼的信息的預期接受者的origin屬性完全一致，來防止密碼被惡意的第三方截獲。如果你明確的知道消息應該發送到哪個窗口，那麼請始終提供一個有確切值的targetOrigin，而不是。不提供確切的目標將導致數據泄露到任何對數據感興趣的惡意站點。
4. transfer 可選
   是一串和message 同時傳遞的 Transferable 對象. 這些對象的所有權將被轉移給消息的接收方，而發送一方將不再保有所有權。