iframe通信

當項目中需要引入一個當獨的頁面的時候,可以使用iframe實現(xiàn)。
主頁面和子頁面的通信:
1.主頁面和子頁面同源,主頁面可以通過window.frames[子頁面的iframename]來獲取子頁面的window對象。也可以通過getElementById(子頁面的iframeid).contentWindow來獲取window對象。
子頁面可以通過parent屬性來獲取父頁面window對象(注意:如果沒有父頁面,parent即為當前頁面的window對象。所以可以通過parent===window來判斷是否有沒父副頁面)
2.主頁面和子頁面同頂級域名,當時二級域名不同。
這個情況:主頁面訪問子頁面的方法會報錯。但是子頁面調(diào)用父方法正常.
解決方案:主頁面和子頁面設置相同的document.domain
3.主頁面跟子頁面不同源
1.通過子頁面監(jiān)聽hashchange事件,父頁面修改子頁面hash的方式
通過中間層
2. 通過postMessage方式。第一個參數(shù)是傳輸數(shù)據(jù)、第二個是origin.
指明目標窗口的源,協(xié)議+主機+端口號[+URL],URL會被忽略.設置為*代表所有都可以接受.注意:要傳遞數(shù)據(jù),必須獲取iframe的window對象。
3.window.name
4.再調(diào)套多一層iframe做中間層。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 1. 什么是跨域? 跨域一詞從字面意思看,就是跨域名嘛,但實際上跨域的范圍絕對不止那么狹隘。具體概念如下:只要協(xié)議...
    他在發(fā)呆閱讀 858評論 0 0
  • 1. 什么是跨域? 跨域一詞從字面意思看,就是跨域名嘛,但實際上跨域的范圍絕對不止那么狹隘。具體概念如下:只要協(xié)議...
    w_zhuan閱讀 620評論 0 0
  • HTML標簽解釋大全 一、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,526評論 1 41
  • 空閑時間,看看書籍,聽聽音頻,腦海里會突然冒出某些想法,有些荒唐,有些混沌,隨手記錄下來,便成為下面的片段式文字。...
    AZ雕刻孤獨AZ閱讀 542評論 1 4
  • 今天遇到了一件很糟心的事情!我的6s手機屏幕摔花了,經(jīng)鑒別只是外面玻璃裂了,所以我拿到深圳最大的電子批發(fā)市場華強北...
    小金帽閱讀 668評論 0 3

友情鏈接更多精彩內(nèi)容