hi 這里是胡斌的本周工作總結
本周工作內容
- 合規二期迭代自測完成
本周學習總結
iframe之間的跨域和通信
本周的合規二期開發接觸到了很多iframe相關的通信,經驗不是很足,iframe通信這些在之前接觸較少,而主要用到的通信方式就是window.name,支持2M的數據量,當iframe的頁面跳到其他地址時,window.name值可以保持不變。
非跨域
- 父頁面調用子頁面:
FrameName.window.childMethod();
- 子頁面調用父頁面:
parent.window.parentMethod();
- 在用FrameName.window得到子頁面的窗體之后,就可以像訪問同一頁面的DOM元素一樣來進行DOM操作
跨域
- 主域相同
只有兩個頁面同域才能才能訪問winodw.name,所以在父子頁面的主域名相同的場景下可以將子頁面改為與父頁面同域(xxx.com)即可(可以通過document.domain設置),這樣的話同樣可以做到父子頁面的雙向通信。
- 不同域
父頁面調用子頁面:
可以利用 location 對象的 hash 值,我們需要在父頁面設置 iframe的 src 后面多加個#data 字符串(data為需要傳遞的數據),然后在子頁面中通過某種方式能即時的獲取到這兒 data,這兒可以在子頁面中通過 setInterval 方法設置定時器, 監聽 location.href 的變化即可獲得上面的 data 信息
子頁面向父頁面傳遞數據:
實現的技巧是在父子兩個iframe之外利用一個代理 Iframe Z,它嵌入到子頁面中,并且和父頁面必須保持是同域,然后我們通過它充分利用上面非跨域的方式就能把子頁面的數據傳遞給 iframeC,同時iframeC和主頁面又是同域的,所以它們之間同樣可以以非跨域的方式通信,在這里的可以使用一個經常使用的屬性 window.top (也可以使用window.parent.parent),它返回對載入瀏覽器得最頂層 window 對象的引用,這樣就能直接條用父頁面中方法啦。