iframe跨域通訊 postMessage

2021-10-22 11:30:01 字數 1262 閱讀 6694

一、 跨域通訊概述

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...