HTML5入門 跨源通訊

w3c 規範

本文demo

(一)跨源通訊

協議，主機，埠。
與的源是一樣的，因為不考慮路徑
方式 跨文件通訊cross-document messaging
通道通訊channel messaging
互動 瀏覽器前端（ifrmae，標籤頁，瀏覽器視窗之間）(cross-document messaging,channel messaging)
與後端服務通訊(xmlhttprequert)

訊息

以訊息事件方式實現。適用server-sent events, web sockets, cross-document messaging, and channel messaging
訊息定義如下

(二)cross-document messaging

apiwindow . postmessage(message, [ ports, ] targetorigin)
message：要傳送的訊息
targetorigin:目標頁面
傳送訊息
呼叫目標頁面的postmessage
如iframe的contentwindow
document.getelementbyid("innerframe").contentwindow.postmessage("abc","");
接受訊息
監聽window的message事件
接收到的事件物件中比較重要的屬性是：
event . data ：傳送方傳送過來的訊息
傳送方不能更改，接收方根據該欄位判斷訊息是否合法。
示例**

(三) 通道通訊

建立雙工通道
var channel = new messagechannel();
通道含有埠陣列，含有兩個port，每乙個port都可以傳送與接收，一般port1用於本地接收
port2用於遠端傳送
與其他頁面建立通道，例如

document.getelementbyid("innerframe").contentwindow.postmessage("hello",[channel.port2],

""); 注意，在ie10引數順序可能不一樣[channel.port2]
在最後，如postmessage("hello","",[channel.port2]);

接收通道訊息

postmessage與onmessage組合使用
先收到postmessage過來的訊息，訊息裡面的ports[0]就是建立好的通道，可以儲存下來繼續使用，可以用來傳送資料，
也可以設定onmessage函式來接收通道訊息，如
if( window.attachevent )
window.attachevent("onmessage",rmessage)
else
window.addeventlistener("message",rmessage,false);
var a_port;
function rmessage(e)
;e.ports[0].postmessage(e.data+" back");
}//fun
示例**

的**

**

abc

Html5 跨域通訊

h5 跨域通訊 在主頁面中通過iframe嵌入外部頁面，通過iframe的window物件postmessage方法向iframe頁面傳遞訊息。1 2 313 14 15 16 17 18 iframe頁面中通過對視窗物件的message事件進行監聽，以獲取訊息。1 2 312 13 iframe ...

HTML5 之跨域通訊（postMessage）

很多情況下，我們受到瀏覽器的安全策略限制。如何能規避此限制，並且能安全的使用跨域通訊，這就不得不介紹一下 postmessage 了。一 關於 postmessage window.postmessage 方法可以安全地實現跨源通訊。通常，對於兩個不同頁面的指令碼，只有當執行它們的頁面位於具有相同的...

html5跨域方法

從html5開始，可以通過在響應頭里增加access control allow origin，實現跨域請求 node的 當然，生產環境裡不能把allow origin設定成 而應該設定成允許跨域訪問的源站的網域名稱。allow headers是允許跨域請求攜帶的http request heade...