解決跨域 三 postMessage

html5為了解決跨域的問題，引入了乙個全新的api；跨文件通訊api（cross-document messaging）。這個api為window物件新增了乙個window.postmessage方法，允許跨視窗通訊，不論這兩個視窗是否同源。postmessage是h5新增的方法，postmessage可以實現跨文件訊息傳輸（cross document messaging），internet explorer 8, firefox 3, opera 9, chrome 3和 safari 4都支援postmessage。

該方法可以通過繫結window的message事件來監聽傳送跨文件訊息傳輸內容。

otherwindow.

postmessage
(message, targetorigin,
[transfer]
);

var popup = window.

open
('','title');
popup.
postmessage
('hello world!'
,'');

window.opener.

postmessage
('nice to see you'
,'');

window.

addeventlistener
('message'
,function
(e),
false
);

子視窗通過event.source屬性引用父視窗，然後傳送訊息。例子如下

window.

addeventlistener
('message'
, receivemessage)
;function
receivemessage
(event)

window.

addeventlistener
('message'
, receivemessage)
;function
receivemessage
(event)
else
}

window.

onmessage
=function
(e)var payload =
json
.parse
(e.data)
; localstorage.
setitem
(payload.key,
json
.stringify
(payload.data));
};子視窗將父視窗發來的訊息，寫入自己的localstorage。

父視窗傳送訊息的**如下。

var win = document.
getelementsbytagname
('iframe')[
0].contentwindow;
var obj =
;win.
postmessage
(json
.stringify()
,'');

加強版的子視窗接收訊息的**如下。

window.
onmessage
=function
(e)}
;

加強版的父視窗傳送訊息**如下。

var win = document.
getelementsbytagname
('iframe')[
0].contentwindow;
var obj =
;// 存入物件
win.
postmessage
(json
.stringify()
,'');
// 讀取物件
win.
postmessage
(json
.stringify()
,"*");
window.
onmessage
=function
(e);

iframe跨域通訊 postMessage

一 跨域通訊概述 messageevent 四個屬性 message 型別 data window.postmessage的第乙個引數 origin 呼叫postmessage時頁面的當前狀態 source 呼叫postmessage的視窗資訊 二 postmessage語法 window.post...

HTML5 之跨域通訊（postMessage）

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

跨域php,php怎麼解決跨域

php解決跨域問題 在做專案的過程中經常需要跨域訪問。這裡主要介紹一下 php 中怎麼解決跨域問題。1 允許所有網域名稱訪問header access control allow origin 2 允許單個網域名稱訪問header access control allow origin 3 允許多個...