一、 跨域通訊概述
messageevent 四個屬性
message(型別)
data(window.postmessage的第乙個引數)
origin(呼叫postmessage時頁面的當前狀態)
source(呼叫postmessage的視窗資訊)
二、postmessage語法
window.postmessage(message,targetorigin、[transfer])
父視窗
='parent'
>
'子視窗鏈結' id=
'oframe'
>
<
/iframe>
<
/div>
//監聽子視窗資訊
window.
addeventlistener
('message'
,(event)
=>
,false
)// 父視窗向子視窗傳送資訊
document.
getelementbyid
("oframe"
).contentwindow.
postmessage
(msg,
'子視窗'
)<
/script>
子視窗
='child'
>
<
/div>
// 父視窗向子視窗傳送資訊
trycatch()
finally
//監聽父視窗資訊
window.
addeventlistener
('message'
,(event)
=>
,false
)<
/script>
總結
父視窗給子視窗傳送資訊,需要用iframe的contentwindow屬性作為呼叫主體
子視窗給父視窗傳送資訊,需要用window.top, 多層iframe 使用 window.frameelement
document.getelementbyid(iframe的id).contentwindow.location.reload(true);
iframe跨域通訊
簡述 window.postmessage方法,允許跨視窗通訊,不論這兩個視窗是否同源。視窗都可以通過message事件,監聽對方的訊息。語法 otherwindow.postmessage message,targetorigin,transfer message 傳送的內容。targetorgi...
iframe跨域通訊
重點來了 貼 父級頁面傳送資訊給子級 var son document.getelementbyid st st為子級iframe的id url可以為純網域名稱也可以為 當為 時所有子級都會接收到 當為純網域名稱時,只有這個網域名稱才會收到 url message為你要傳送的訊息 message 我...
iframe 通訊和跨域通訊
幾年前頁面裡使用iframe巢狀使用的還是很多的。以下是多種使用方法 1 同域下巢狀 父頁面 window.nl ad function function fu 子頁面 父頁面呼叫子頁面 iframename.window.document.xx iframename.window.function...