hi 這里是胡斌的本周工作總結(jié)
本周工作內(nèi)容
- 合規(guī)二期迭代自測(cè)完成
本周學(xué)習(xí)總結(jié)
iframe之間的跨域和通信
本周的合規(guī)二期開(kāi)發(fā)接觸到了很多iframe相關(guān)的通信露该，經(jīng)驗(yàn)不是很足，iframe通信這些在之前接觸較少濒生，而主要用到的通信方式就是window.name，支持2M的數(shù)據(jù)量控乾，當(dāng)iframe的頁(yè)面跳到其他地址時(shí)么介，window.name值可以保持不變。
非跨域
- 父頁(yè)面調(diào)用子頁(yè)面：
FrameName.window.childMethod(); - 子頁(yè)面調(diào)用父頁(yè)面：
parent.window.parentMethod(); - 在用FrameName.window得到子頁(yè)面的窗體之后蜕衡，就可以像訪問(wèn)同一頁(yè)面的DOM元素一樣來(lái)進(jìn)行DOM操作
跨域
- 主域相同
只有兩個(gè)頁(yè)面同域才能才能訪問(wèn)winodw.name壤短，所以在父子頁(yè)面的主域名相同的場(chǎng)景下可以將子頁(yè)面改為與父頁(yè)面同域（xxx.com）即可（可以通過(guò)document.domain設(shè)置），這樣的話同樣可以做到父子頁(yè)面的雙向通信慨仿。
- 不同域
父頁(yè)面調(diào)用子頁(yè)面：
可以利用 location 對(duì)象的 hash 值久脯，我們需要在父頁(yè)面設(shè)置 iframe的 src 后面多加個(gè)#data 字符串（data為需要傳遞的數(shù)據(jù)），然后在子頁(yè)面中通過(guò)某種方式能即時(shí)的獲取到這兒 data镰吆，這兒可以在子頁(yè)面中通過(guò) setInterval 方法設(shè)置定時(shí)器帘撰， 監(jiān)聽(tīng) location.href 的變化即可獲得上面的 data 信息
子頁(yè)面向父頁(yè)面?zhèn)鬟f數(shù)據(jù)：
實(shí)現(xiàn)的技巧是在父子兩個(gè)iframe之外利用一個(gè)代理 Iframe Z，它嵌入到子頁(yè)面中万皿，并且和父頁(yè)面必須保持是同域摧找，然后我們通過(guò)它充分利用上面非跨域的方式就能把子頁(yè)面的數(shù)據(jù)傳遞給 iframeC，同時(shí)iframeC和主頁(yè)面又是同域的相寇，所以它們之間同樣可以以非跨域的方式通信慰于，在這里的可以使用一個(gè)經(jīng)常使用的屬性 window.top (也可以使用window.parent.parent)，它返回對(duì)載入瀏覽器得最頂層 window 對(duì)象的引用唤衫，這樣就能直接條用父頁(yè)面中方法啦婆赠。
