js Iframe與父級頁面通訊及IE9 相容性

一、 postmessage

window.postmessage()方法安全地啟用window物件之間的跨源通訊；例如，在頁面和它產生的彈出視窗之間，或者在頁面和嵌入其中的iframe之間。

二、語法

otherwindow.postmessage(message, targetorigin, [transfer]);

otherwindow：是接收物件的窗體引用，例如：子窗體(iframe)對父級窗體的引用 "window.parent" 或者其他iframe的引用「window.frames +索引值(命名或數字)」

message：將要傳送到其他 window的資料。在ie9以下的瀏覽器,message不支援json物件，必須是字串型別

targetorigin：通過視窗的origin屬性來指定哪些視窗能接收到訊息事件，其值可以是字串"*"（表示無限制）或者乙個uri。在傳送訊息的時候，如果目標視窗的協議、主機位址或埠這三者的任意一項不匹配targetorigin提供的值，那麼訊息就不會被傳送；只有三者完全匹配，訊息才會被傳送。

transfer：是一串和message 同時傳遞的transferable物件. 這些物件的所有權將被轉移給訊息的接收方，而傳送一方將不再保有所有權。

三、應用子窗體和父窗體之間的通訊

1. parent.html：新增有iframe(childiframe.html) 頁面，並監聽message事件

<
html
>
<
head
>
<
meta 
charset
="utf-8"
/>
<
meta 
name
="viewport"
content
="width=device-width, initial-scale=1.0"
/>
<
title
>
title
>
<
style
>
iframe
style
>
head
>
<
body
>
<
h1>parent
h1>
<
iframe 
src="childiframe.html"
>
iframe
>
<
script
>
window.addeventlistener(
"message", 
function
(message) );
script
>
body
>
html
>

view code

2. childiframe.html：直接向parent 傳送一條訊息

<
html
>
<
head
>
<
meta 
charset
="utf-8"
/>
<
meta 
name
="viewport"
content
="width=device-width, initial-scale=1.0"
/>
<
title
>
title
>
head
>
<
body
>
<
h1>childiframe
h1>
<
script
>
window.parent.postmessage(,"*
");script
>
body
>
html
>

view code

3. ie9-相容問題：

ie9及以下的瀏覽器,message不支援json物件，必須是字串型別。傳送時將json轉換為字串

window.parent.postmessage(json.stringify(), "*");

ie9還是ie8 不相容addeventlistener和"message"監聽方法和事件，相容辦法

//
ie8,ie9相容方法
if(window.attachevent) );
} else
);}

js Iframe與父級頁面通訊及IE9 相容性

js，iframe 父子頁面通訊

iframe子頁面與父頁面通訊

iframe 子頁面與父頁面通訊

js Iframe與父級頁面通訊及IE9 相容性

js，iframe 父子頁面通訊

iframe子頁面與父頁面通訊

iframe 子頁面與父頁面通訊

相關推薦