iframe之父子頁面相互傳參

2021-10-08 02:11:48 字數 2909 閱讀 7959

傳送方:

iframe.contentwindow.

postmessage

('要傳的引數'

,'*'

)

接收方:

window.

addeventlistener

("message"

,function

(e),

false

)// e是個物件,裡面包含了傳過來的引數

傳送方:

parent關鍵字表示父視窗,如果乙個視窗沒有父視窗,則它的 parent 屬性為自身的引用.

parent.

postmessage

('要傳的引數'

,'*'

)

接收方:

window.

addeventlistener

("message"

,function

(e),

false

)// e是個物件,裡面包含了傳過來的引數

"./iframe-子頁面.html"

frameborder

="0"

id="iframe"

>

iframe

>

"btn"

>

父傳子button

>

>

const iframe = document.

getelementbyid

('iframe'

)const btn = document.

getelementbyid

('btn'

)const p = document.

queryselector

('p'

)const

receivemsg

=function

(e)= e

if(data.id ===

'son')}

btn.

onclick

=function

(e),

'*')

} window.

addeventlistener

("message"

, receivemsg,

false

) window.a =

'父頁面'

子傳父button

>

div>

>

//監聽message事件

const b = document.

queryselector

('b'

)const

receivemsg

=function

(e)= e

if(data.id ===

'father')}

window.

addeventlistener

("message"

, receivemsg,

false

)const

sendmsg

=function()

,'*')}

console.

log(window.parent.a)

// 父頁面

script

>

body

>

html

>

iFrame父子頁面相互呼叫

子頁面 父頁面 parent.aparent.getb id window.parent.document id為父頁面元素 jq btnok parent.document click window.parent.document.getelementbyid id window.parent.d...

父子元件相互傳參

第一步 在父元件中宣告需要傳遞的引數 tempchoseimg 插圖 無值 傳遞個變數過去 值在子元件中 第二步 在父元件中給子元件傳遞引數 sync 相互 第三步 子元件接收父元件的引數 props opentempshow tempchoseimg 第四步 子元件給接收到的父元件引數賦值 然後傳...

iframe之父子頁面通訊

iframe之父子頁面通訊 1 獲取 子頁面 的 window 物件 在父頁面中,存在如下兩個物件 window.frames document.iframeelement.contentwindow 可以獲取到 子頁面 window 物件 iframe id document.getelement...