JavaScript - Use window.postMessage to send message from frame to frame

有時候我們在做網頁版面時，會使用到frameset，在它的下一層設置各個frame來呈現我們的

畫面。通常，這樣的畫面設計可能比較重視在資料呈現的方便上，而不是畫面的美感上。

假設我們要建置兩個frame(左右兩邊各一半的空間)，那我們可能需建置以下檔案：

一、index.html (首頁-setting frame page)
二、send.html (left frame)
三、receive.html (right frame)

測試的瀏覽器為Chrome 31

初始畫面如下：

index.html，HTML 語法如下：

<frameset cols="55%,*">
    <frame id="left_frame" name="left"></frame>
    <frame id="right_frame" name="right"></frame>
</frameset>

及JavaScript 語法如下：

window.onload = function(){
document.getElementById("left_frame").src = "send.html?r="+Math.random();
document.getElementById("right_frame").src = "receive.html?r="+Math.random();
};

使用這段JS code的目的只不過是避免在修改send.html等頁面時，會有cache的情況！


send.html，HTML 語法如下：

Send Page:<br>
<textarea rows="10" cols="50" id="msg"></textarea><br />
<input type="button" value="send" onclick="sendMessage()" id="sendBtn">
<div id="receiveMessage"></div>

及JavaScript 語法如下：

if(typeof window.postMessage == 'undefined'){
    alert("Brower not support communication api");
    document.getElementById("sendBtn").disabled = true;
}
function sendMessage(){
    var receive_frame = window.parent.frames[1];
    receive_frame.postMessage(document.getElementById("msg").value, "http://localhost/Example_Practice/html5comms/receive.html");
window.onmessage = function(e){
    if(e.origin == "http://localhost"){
 document.getElementById("receiveMessage").innerHTML = "<span style='color: green;'>localhost send : "+e.data+"</span>";
  }
 }
}

在這邊的JS語法主要是要處理send message過去給receive.html，及接收來自receive.html

的回傳訊息。請注意! postMessage內的URL請使用絕對位置，而這個function也支援

cross-domain。

window.parent.frames[1] 主要是針對send.html的上一層即index.html取得frame[1]的html object

，及receive本身。如此一來在postMessage時，代表的將是send post 給 receive frame！


receive.html，HTML 語法如下：

Receive Page:
<div id="receiveMessage"></div>

及JavaScript 語法如下：

window.onmessage = function(e){
    if(e.origin == "http://localhost"){
 document.getElementById("receiveMessage").innerHTML = "<span style='color: blue;'>localhost send:"+e.data+"</span>";
 e.source.postMessage("Receive accept message!", e.origin);
    }
}

在這邊receive.html JS code會判斷domain address。

最後Demo的過程如下：

最後，利用postMessage的方式，讓我們能夠傳送大量的訊息到另外一個frame去！