IFRAME的各種經(jīng)驗總結(jié)
在一個頁面中如果想嵌套子頁面，應(yīng)該能想到iframe,的確它之前的應(yīng)用非常廣泛雪猪，它可以實現(xiàn)無縫刷新连锯，模擬onhashchange跨域，安全的加載第三方資源與廣告宠默，實現(xiàn)富文本編輯麸恍，文件上傳，用它搞定IE6-IE7的select BUG（select標簽會移到遮罩層的上面來搀矫，可以使用iframe遮啄ɑΑ）。不過后來因為一些iframe本身的缺陷瓤球，出于安全性的考慮融欧，如今漸漸的淡出的大家的視角。
經(jīng)驗技巧與破坑
IE下設(shè)置iframe的透明
- iframe自身設(shè)置
allowTransparency屬性為true.（但設(shè)置了allowTransparency=true,就遮不住select了） - iframe中的文檔（src指向的頁面）卦羡，
background-color或body元素的bgColor屬性必須設(shè)置為transparent噪馏。
獲取window對象
在iframe內(nèi)獲取window對象只能獲取到當前iframe內(nèi)的對象，獲取父頁面的方法只需在方法前面加上parent,
-
必須parent.window就找到的是父元素的window對象绿饵，父頁面控制子頁面只用
document.frames(iframe的name)ducument.frames('myiframe').document.getElementsByTagName('body')[0].就能找到iframe的body元素欠肾，然后如何判斷是否在iframe內(nèi)部還是外部，可以根據(jù)window.frames.length和parent.frames.length來進行判斷
獲取IFRAME
在主頁面直接拟赊，frames[iframeName]刺桃，iframes是主頁面中的一個對象，它的屬性iframeName可以獲得此名字的iframe的window對象吸祟。
獲取iframe中的文檔對象
var node = document.getElementById("iframeID")
var doc = node.contentDocument || node.contentWindow.document
前面是w3c瑟慈，后面的寫法是IE.
判定iframe是否加載完成
if(iframe.addEventListener){
iframe.addEventListener("load",callback,false)
}
else{
iframe.attachEvent("onload",callback);
}
清空iframe桃移，同時不保留歷史的寫法
iframeWindow.location.replace("about:blank")
此replace方法不是字符串的replace方法，這個replace方法是location專有的方法葛碧，意思是替換window的鏈接地址借杰，而且被替換的鏈接地址不存入歷史記錄中。
history api
iframe和父窗口共享history
微信中的iframe
頁面加載iframe內(nèi)部的圖片和文字都是不可被復(fù)制的吹埠，iframe是受微信的安全限制第步。防止掛馬入侵，因此阻止了很多事件的默認行為
利用iframe跨域
- 利用iframe和location.hash
- 利用iframe和window.name
防止被IFRAME
響應(yīng)頭法
在響應(yīng)頭里加一個X-Frame-Options缘琅，取值有三種粘都，大部分瀏覽器都支持。這樣被不同源的頁面以iframe包含時就不會顯示了刷袍。
X-Frame-Options:DENY // 瀏覽器拒絕當前頁面加載任何Frame頁面
X-Frame-Options:SAMEORIGIN // frame頁面的地址只能為同源域名下的頁面
X-Frame-Options:ALLOW-FROM origin// origin為允許frame加載的頁面地址
腳本法
if (window != window.top) {
window.top.location.replace(window.location)
// 這是直接代替外窗翩隧，你也可以干別的
}
或者用下面這種
if (top != self) {
top.location = self.location;
}
