1.首先在父組件內引入iframe

<iframe 
    style={{border:0,width:"100%",height:"100%",}}
    src='/model.html'
    id='calculation'
    //onLoad={this.sendToken}
/>

2.然後在父組件內的Button按鈕上綁定點擊事件

<Button type="primary" onClick={this.handleClick.bind(this)}>點我</Button>
 

3.繼續在父組件內編寫handleClick方法

handleClick = () =>{
    //必須是iframe加載完成後才可以向子域發送數據
    const childFrameObj = document.getElementById('calculation');
    childFrameObj.contentWindow.postMessage('來自react的信息', '*');
};

4.在iframe頁面編寫回掉函數

//回調函數
function receiveMessageFromIndex ( event ) {
    console.log( '我是iframe,我接收到了：', event.data );
}

//監聽message事件
window.addEventListener("message", receiveMessageFromIndex, false);
 

大功告成

接下來介紹下postMessage這個方法

• window.postMessage() 方法可以安全地實現跨源通信。通常，對於兩個不同頁面的腳本，只有當執行它們的頁面位於具有相同的協議（通常為https），端口號（443為https的默認值），以及主機 (兩個頁面的模數 Document.domain設置為相同的值) 時，這兩個腳本才能相互通信。window.postMessage() 方法提供了一種受控機制來規避此限制，只要正確的使用，這種方法就很安全。

• window.postMessage() 方法被調用時，會在所有頁面腳本執行完畢之後（e.g., 在該方法之後設置的事件、之前設置的timeout 事件,etc.）向目標窗口派發一個 MessageEvent

  消息。 該MessageEvent消息有四個屬性需要註意： message 屬性表示該message 的類型； data 屬性為 window.postMessage 的第一個參數；origin 屬性表示調用window.postMessage() 方法時調用頁面的當前狀態； source 屬性記錄調用 window.postMessage() 方法的窗口信息。

MDN (需要梯子)

語法

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

otherWindow
其他窗口的一個引用，比如iframe的contentWindow屬性、執行window.open返回的窗口對象、或者是命名過或數值索引的window.frames。

message
將要發送到其他 window的數據。它將會被結構化克隆算法序列化。這意味著你可以不受什麽限制的將數據對象安全的傳送給目標窗口而無需自己序列化。

targetOrigin
通過窗口的origin屬性來指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示無限制）或者一個URI。在發送消息的時候，如果目標窗口的協議、主機地址或端口這三者的任意一項不匹配targetOrigin提供的值，那麽消息就不會被發送；只有三者完全匹配，消息才會被發送。這個機制用來控制消息可以發送到哪些窗口；例如，當用postMessage傳送密碼時，這個參數就顯得尤為重要，必須保證它的值與這條包含密碼的信息的預期接受者的origin屬性完全一致，來防止密碼被惡意的第三方截獲。如果你明確的知道消息應該發送到哪個窗口，那麽請始終提供一個有確切值的targetOrigin，而不是*。不提供確切的目標將導致數據泄露到任何對數據感興趣的惡意站點。

transfer 可選
是一串和message 同時傳遞的 Transferable 對象. 這些對象的所有權將被轉移給消息的接收方，而發送一方將不再保有所有權。

message 的屬性有:

data

從其他 window 中傳遞過來的對象。

origin

調用 postMessage 時消息發送方窗口的 origin . 這個字符串由 協議、“://“、域名、“ : 端口號”拼接而成。例如 https://example.org (隱含端口 443)、http://example.net (隱含端口 80)、http://example.com:8080。請註意，這個origin不能保證是該窗口的當前或未來origin，因為postMessage被調用後可能被導航到不同的位置。

source

對發送消息的窗口對象的引用; 您可以使用此來在具有不同origin的兩個窗口之間建立雙向通信。

使用postMessage進行react向iframe的數據通信.md