iframe跨域父子頁面通訊方法

2021-10-06 20:35:04 字數 923 閱讀 4885

儘管iframe因相容、效能等問題逐漸被替換掉,但有不少存量專案仍在使用。最近,我們部門一位小夥伴遇到iframe跨域相關問題,詳細如下:

[問題前置條件]

有兩個系統a、b(都是銀行存量老系統),a、b跨域;

a系統中有乙個頁面a、b系統中有乙個頁面b;

b以iframe方式嵌在a頁面中。

[問題描述]

那麼,iframe、跨域、如何通訊?

[解決方法]

方法一:通過**頁面通訊

父頁面http://localhost:8081/dlparent.html

**頁面http://localhost:8081/iframe.html

子頁面http://localhost:8080/dlchild.html

頁面效果如下:

方法二:postmessage

父頁面 http://localhost:8081/pmparent.html

處理    

子頁面http://localhost:8080/pmchild.html:

儲存

頁面執行效果如下:

iframe父子頁面之間通訊 跨域

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

父子頁面跨域通訊

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

iframe 父子域通訊

場景描述 前端常用iframe來嵌入其他網域名稱頁面,通常只是靜態展示 如果是自己系統群的兩個站點巢狀,則可以通過 配合實現互相通訊,實現父子域相互操作。前提是父子網域名稱相同,否則瀏覽器出於安全協議會阻止跨域操作。我的需求 站點需要嵌入站點的頁面,且通過操作可以觸發頁面的事件。以下稱a,稱b a的...