iframe標籤使用總結

注意事項

一、要確保在iframe加載完成後再進行操做，若是iframe還未加載完成就開始調用裏面的方法或變量，會產生錯誤。

二、儘可能在不要在父頁面中調用子頁面中的頁面元素或函數，全部涉及的交互操做盡可能放在子頁面中來完成。 　 能夠用onload事件來判斷iframe是否加載完成

父頁面訪問子頁面中數據：兩種方法：

一、document.getElementById('iframe').contentWindow.key

二、IframeNmae.window.key

子頁面訪問父頁面：

parent.window.key

若是是跨域頁面嵌套 父到子：能夠用url傳值(子頁面location)，或者postMessage 子到父:postMessage（TODO）

優勢 一、頁面嵌套，像導航等不一樣頁面的相同組件，方便開發

二、重載頁面時不須要重載整個頁面，只須要重載頁面中的一個框架頁(減小了數據的傳輸，增長了網頁下載速度)（這個尚未特別注意）

三、徹底隔離js和css，減小耦合性

缺點：

一、不利於seo，不利於搜索引擎爬蟲優化

二、iframe會佔用瀏覽器的鏈接池

三、過多的iframe會增長服務器請求壓力

四、移動設備兼容性差

to be continued ...