iframe
常用屬性
1.frameborder:是否顯示邊框，1(yes),0(no)
2.height:框架作爲一個普通元素的高度，建議在使用css設置。
3.width:框架作爲一個普通元素的寬度，建議使用css設置。
4.name:框架的名稱，window.frames[name]時專用的屬性。
5.scrolling:框架的是否滾動。yes,no,auto。
6.src：內框架的地址，可以使頁面地址，也可以是圖片的地址。
7.srcdoc , 用來替代原來HTML body裏面的內容。但是IE不支持, 不過也沒什麼卵用
8.sandbox: 對iframe進行一些列限制，IE10+支持
常用功能
- 可以一個網頁裏嵌入另一個網頁
- 導航欄tab切換頁（古老的做法）、在線編輯器、廣告植入
- 歷史記錄管理，解決ajax化網站響應瀏覽器前進後退按鈕的方案
- 跨域通信等
iframe利弊
- iframes 阻塞頁面加載
- 觸發 window 的 onload 事件是非常重要的。onload 事件觸發使瀏覽器的 “忙” 指示器停止，告訴用戶當前網頁已經加載完畢。當 onload 事件加載延遲後，它給用戶的感覺就是這個網頁非常慢
- window 的 onload 事件需要在所有 iframe 加載完畢後(包含裏面的元素)纔會觸發。通過 JavaScript 動態設置 iframe 的 SRC 可以避免這種阻塞情況
獲取iframe裏的內容
- 主要的兩個API就是contentWindow,和contentDocument
- iframe.contentWindow, 獲取iframe的window對象
- iframe.contentDocument, 獲取iframe的document對象
在iframe中獲取父級內容
- 同理，在同域下，父頁面可以獲取子iframe的內容。那麼子iframe同樣也能操作父頁面內容。在iframe中，可以通過在window上掛載的幾個API進行獲取.
window.parent 獲取上一級的window對象，如果還是iframe則是該iframe的window對象
window.top 獲取最頂級容器的window對象，即，就是你打開頁面的文檔
window.self 返回自身window的引用。可以理解 window===window.self
判斷iframe加載完成
1. 非ie下使用onload事件
iframe(dom元素).onload = function () {}
2. ie下使用onreadystatechange或者設定計時器
iframe.onreadystatechange = function(){
if (iframe.readyState == "complete" || iframe.readyState == ''loaded”){
alert("Local iframe is now loaded.");
}
}
同域/跨域
iframe跨域通訊之document.domain
1. 對於主域相同子域不同的兩個頁面，我們可以通過document.domain + iframe來解決跨域通信問題。
舉個例子，網頁a(http://www.easonwong.com)和網頁b(http://script.easonwong.com)
兩者都設置document.domain = 'easonwong.com'（這樣瀏覽器就會認爲它們處於
同一個域下），然後網頁a再創建iframe上網頁b，就可以進行通信啦～
iframe跨域通訊之postMessage
window.name
- 這個是解決跨域中父頁面向子頁面請求數據
- 建立iframe，指定src爲被跨域的頁面
- 被跨域文件修改window.name，將數據傳給window.name
- 將iframe .src修改爲本域代理文件，然後就可以取到contentWindow.name
- 進行處理數據，清除iframe充分的運用了window.name因爲頁面的網址更改而名稱不更改的特性
window.location.hash
- 解決子頁面訪問父頁面數據問題(window.location.href)
- 通過錨點#傳遞數據。利用定時器實時監測
- 錨點特性#不刷新頁面
- 定時器耗性能方法比較笨！
- location.hash缺點
1、傳遞數據量有限
2、不太安全
這個錨點後面的num就是你可以存入的數據