iframe父子頁面之間通訊 跨域

最近做官網的需求中，涉及到使用iframe。在iframe中會有父子頁面之間的通訊問題是比較頭疼的事情。下面總結下跨域情況下父子頁面之間怎麼進行通訊。

父頁面：網域名稱1；子頁面：網域名稱2。

父頁面：

"iframedom"

src="
" />
>
// 將引數放在req中，通過src傳到子頁面中

>

var search = window.location.search;
// 得到的格式為 ?req=類似
search = search.
split
('=')[
1];var searchobj =
json
.parse
(decodeuri
(search)
)// 其中獲取到的searchobj中就是在父頁面中傳入的引數。
script
>

子頁面：

>

// 向iframe的父級事件進行傳參
// 引數可以是物件，也可以是數字。
// 方式一：
window.parent.
postmessage(,
age:25,
},'*')
;// 方式二：
window.parent.
postmessage
('呦吼吼吼'
,'*');
script
>

>

// 針對子頁面入參有下面的接收方式。
// 方式一：
window.
addeventlistener
('message'
, e =>
;      console.
log(data.text)
;// 子頁面的文字
console.
log(data.age)
;// 25
console.
log(data.obj)
;// 
console.
log(data.obj.year)
;// 2021
...});
// 方式二: 
window.
addeventlistener
('message'
, e =>
;      console.
log(data)
;// 呦吼吼吼
console.
log(data.text)
;// undefined
...});
script
>

iframe跨域父子頁面通訊方法

儘管iframe因相容 效能等問題逐漸被替換掉，但有不少存量專案仍在使用。最近，我們部門一位小夥伴遇到iframe跨域相關問題，詳細如下 問題前置條件 有兩個系統a b 都是銀行存量老系統 a b跨域 a系統中有乙個頁面a b系統中有乙個頁面b b以iframe方式嵌在a頁面中。問題描述 那麼，if...

iframe之父子頁面通訊

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

父子頁面跨域通訊

該window.postmessage 方法安全地啟用window物件之間的跨源通訊 例如，在頁面和它產生的彈出視窗之間，或者在頁面和嵌入其中的iframe之間。targetwindow.postmessage message,targetorigin,transfer 要傳送到其他視窗的資料。使用...