iframe中涉及父子頁面跨域問題

2022-05-28 14:09:08 字數 924 閱讀 6147

跨域,指的是瀏覽器不能執行其他**的指令碼。它是由瀏覽器的同源策略造成的,是瀏覽器施加的安全限制。所謂同源是指相同的網域名稱、協議和埠,只要其中一項不同就為跨域。

舉幾個例子:

和非跨域,它們有相同的網域名稱,協議和埠。

和跨域,相同的埠、協議,但是網域名稱不同(a.123.com和b.123.com)。

和跨域,相同的網域名稱、協議,但是埠不同(8080和8081)。

和跨域跨域,相同的網域名稱、埠,但是協議不同(http和https)。

一,子向父傳資料:

【傳送訊息】

otherwindow.postmessage(message, targetorigin, [transfer])
window.parent.postmessage('hello world','')

只有父視窗是時才會接受到傳遞的訊息。

【接收訊息】

iframe傳遞關閉命令

父視窗接收到命令將iframe關閉

二, 父向子傳資料

共兩個頁面,

頁面1:www.a.com/a.html 

頁面2:www.b.com/b.html

頁面**:www.a.com/a.html

iframe>

iframe跨域父子頁面通訊方法

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

iframe父子頁面之間通訊 跨域

最近做官網的需求中,涉及到使用iframe。在iframe中會有父子頁面之間的通訊問題是比較頭疼的事情。下面總結下跨域情況下父子頁面之間怎麼進行通訊。父頁面 網域名稱1 子頁面 網域名稱2。父頁面 iframedom src 將引數放在req中,通過src傳到子頁面中 子頁面 var search ...

父子頁面跨域通訊

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