iframe基本內涵
通常我們使用iframe直接直接在頁面嵌套iframe標簽指定src就可以了。
<iframe src="demo_iframe_sandbox.htm"></iframe>
但是，有追求的我們，並不是想要這么low的iframe. 我們來看看在iframe中還可以設置些什么屬性
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+支持
上面一些tag，會在下文進行穿插說明，單個不好說。
我們通常使用iframe最基本的特性，就是能自由操作iframe和父框架的內容(DOM). 但前提條件是同域. 如果跨域頂多只能實現頁面跳轉window.location.href.
那什么是同域/ 什么是跨域呢?
就是判斷你的url首部是否一樣，下面會有講解，這里只是提及。
同域不同域的問題:
A:<iframe id="mainIframe" name="mainIframe" src="/main.html" frameborder="0" scrolling="auto" ></iframe> B:<iframe id="mainIframe" name="mainIframe" src="http://www.baidu.com" frameborder="0" scrolling="auto" ></iframe>
使用A時，因為同域，父頁面可以對子頁面進行改寫,反之亦然。
使用B時，不同域，父頁面沒有權限改動子頁面,但可以實現頁面的跳轉
這里，我們先從簡單的開始，當主頁面和iframe同域時，我們可以干 些什么。
獲取iframe里的內容
主要的兩個API就是contentWindow,和contentDocument
iframe.contentWindow, 獲取iframe的window對象
iframe.contentDocument, 獲取iframe的document對象
這兩個API只是DOM節點提供的方式(即getELement系列對象)
var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
console.log("window",iwindow);//獲取iframe的window對象
console.log("document",idoc); //獲取iframe的document
console.log("html",idoc.documentElement);//獲取iframe的html
console.log("head",idoc.head); //獲取head
console.log("body",idoc.body); //獲取body
另外更簡單的方式是，結合Name屬性，通過window提供的frames獲取.
<iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="yes">
<p>Your browser does not support iframes.</p>
</iframe>
<script type="text/javascript">
console.log(window.frames['ifr1'].window);
console.dir(document.getElementById("ifr1").contentWindow);
</script>
其實window.frames['ifr1']返回的就是window對象，即
window.frames['ifr1']===window
這里就看你想用哪一種方式獲取window對象，兩者都行，不過本人更傾向於第二種使用frames[xxx].因為，字母少啊喂~ 然后，你就可以操控iframe里面的DOM內容。
在iframe中獲取父級內容
同理，在同域下，父頁面可以獲取子iframe的內容，那么子iframe同樣也能操作父頁面內容。在iframe中，可以通過在window上掛載的幾個API進行獲取.
window.parent 獲取上一級的window對象，如果還是iframe則是該iframe的window對象 window.top 獲取最頂級容器的window對象，即，就是你打開頁面的文檔 window.self 返回自身window的引用。可以理解 window===window.self(腦殘)
iframe的輪詢
話說在很久很久以前，我們實現異步發送請求是使用iframe實現的~!
怎么可能!!!
真的史料為證(自行google), 那時候為了不跳轉頁面，提交表單時是使用iframe提交的。現在，前端發展尼瑪真快，websocket,SSE,ajax等，逆天skill的出現，顛覆了iframe, 現在基本上只能活在IE8,9的瀏覽器內了。 但是，寶寶以為這樣就可以不用了解iframe了,而現實就是這么殘酷，我們目前還需要兼容IE8+。所以，iframe 實現長輪詢和長連接的trick 我們還是需要涉獵滴。
iframe長輪詢
如果寫過ajax的童鞋，應該知道，長輪詢就是在ajax的readyState = 4的時，再次執行原函數即可。 這里使用iframe也是一樣，異步創建iframe，然后reload, 和后台協商好, 看后台哥哥們將返回的信息放在,然后獲取里面信息即可. 這里是直接放在body里.
var iframeCon = docuemnt.querySelector('#container'),
text; //傳遞的信息
var iframe = document.createElement('iframe'),
iframe.id = "frame",
iframe.style = "display:none;",
iframe.name="polling",
iframe.src="target.html";
iframeCon.appendChild(iframe);
iframe.onload= function(){
var iloc = iframe.contentWindow.location,
idoc = iframe.contentDocument;
setTimeout(function(){
text = idoc.getElementsByTagName('body')[0].textContent;
console.log(text);
iloc.reload(); //刷新頁面,再次獲取信息，並且會觸發onload函數
},2000);
}
這樣就可以實現ajax的長輪詢的效果。 當然，這里只是使用reload進行獲取，你也可以添加iframe和刪除iframe的方式，進行發送信息，這些都是根據具體場景應用的。另外在iframe中還可以實現異步加載js文件，不過，iframe和主頁是共享連接池的，所以還是很蛋疼的，現在基本上都被XHR和hard calllback取締了，這里也不過多介紹了。
自適應iframe之蜜汁廣告
網頁為了賺錢，引入廣告是很正常的事了。通常的做法就是使用iframe，引入廣告地址就可以了，然后根據廣告內容設置相應的顯示框。但是，為什么是使用iframe來進行設置，而不是在某個div下嵌套就行了呢？
要知道，廣告是與原文無關的，這樣硬編碼進去，會造成網頁布局的紊亂,而且,這樣勢必需要引入額外的css和js文件，極大的降低了網頁的安全性。 這些所有的弊端，都可以使用iframe進行解決。
我們通常可以將iframe理解為一個沙盒，里面的內容能夠被top window 完全控制，而且，主頁的css樣式是不會入侵iframe里面的樣式，這些都給iframe的廣告命運埋下伏筆。可以看一下各大站點是否都在某處放了些廣告，以維持生計比如:W3School
但，默認情況下，iframe是不適合做展示信息的，所以我們需要對其進行decorate.
自適應iframe
默認情況下，iframe會自帶滾動條，不會全屏.如果你想自適應iframe的話:第一步：去掉滾動條
<iframe src="./iframe1.html" id="iframe1" scrolling="no"></iframe>
第二步,設置iframe的高為body的高
var iwindow = iframe.contentWindow; var idoc = iwindow.document; iframe.height = idoc.body.offsetHeight;
另外,還可以添加其它的裝飾屬性:
| 屬性 | 效果 |
|---|---|
| allowtransparency | true or false 是否允許iframe設置為透明，默認為false |
| allowfullscreen | true or false 是否允許iframe全屏，默認為false |
看個例子:
<iframe id="google_ads_frame2" name="google_ads_frame2" width="160" height="600" frameborder="0" src="target.html" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true"></iframe>
你可以直接寫在內聯里面，也可以在css里面定義，不過對於廣告iframe來說，樣式寫在屬性中，是best pratice.
iframe安全性探索
iframe出現安全性有兩個方面，一個是你的網頁被別人iframe,一個是你iframe別人的網頁。 當你的網頁被別人iframe時，比較蛋疼的是被釣魚網站利用，然后victim+s留言逼逼你。真.簡直了。 所以為了防止頁面被一些不法分子利用，我們需要做好安全性措施。
防嵌套網頁
比如，最出名的clickhacking就是使用iframe來 攔截click事件。因為iframe享有着click的最優先權，當有人在偽造的主頁中進行點擊的話，如果點在iframe上，則會默認是在操作iframe的頁面。 所以，釣魚網站就是使用這個技術，通過誘導用戶進行點擊，比如，設計一個"妹妹寂寞了"等之類的網頁，誘導用戶點擊，但實際結果，你看到的不是"妹妹",而是被惡意微博吸粉。
所以，為了防止網站被釣魚，可以使用window.top來防止你的網頁被iframe.
//iframe2.html
if(window != window.top){
window.top.location.href = correctURL;
}
這段代碼的主要用途是限定你的網頁不能嵌套在任意網頁內。如果你想引用同域的框架的話，可以判斷域名。
if (top.location.host != window.location.host) {
top.location.href = window.location.href;
}
當然，如果你網頁不同域名的話，上述就會報錯。
所以，這里可以使用try...catch...進行錯誤捕獲。如果發生錯誤，則說明不同域，表示你的頁面被盜用了。可能有些瀏覽器這樣寫是不會報錯，所以需要降級處理。
這時候再進行跳轉即可.
try{
top.location.hostname; //檢測是否出錯
//如果沒有出錯，則降級處理
if (top.location.hostname != window.location.hostname) {
top.location.href =window.location.href;
}
}
catch(e){
top.location.href = window.location.href;
}
這只是瀏覽器端，對iframe頁面的權限做出相關的設置。 我們還可以在服務器上，對使用iframe的權限進行設置.
X-Frame-Options
X-Frame-Options是一個相應頭，主要是描述服務器的網頁資源的iframe權限。目前的支持度是IE8+(已經很好了啊喂)有3個選項:
DENY：當前頁面不能被嵌套iframe里，即便是在相同域名的頁面中嵌套也不允許,也不允許網頁中有嵌套iframe SAMEORIGIN：iframe頁面的地址只能為同源域名下的頁面 ALLOW-FROM：可以在指定的origin url的iframe中加載
- X-Frame-Options: DENY
- 拒絕任何iframe的嵌套請求
- X-Frame-Options: SAMEORIGIN
- 只允許同源請求，例如網頁為 foo.com/123.php，則 foo.com 底下的所有網頁可以嵌入此網頁，但是 foo.com 以外的網頁不能嵌入
- X-Frame-Options: ALLOW-FROM http://s3131212.com
- 只允許指定網頁的iframe請求，不過兼容性較差Chrome不支持
X-Frame-Options其實就是將前端js對iframe的把控交給服務器來進行處理。
//js
if(window != window.top){
window.top.location.href = window.location.href;
}
//等價於
X-Frame-Options: DENY
//js
if (top.location.hostname != window.location.hostname) {
top.location.href =window.location.href;
}
//等價於
X-Frame-Options: SAMEORIGIN
該屬性是對頁面的iframe進行一個主要限制，不過，涉及iframe的header可不止這一個，另外還有一個Content Security Policy, 他同樣也可以對iframe進行限制，而且，他應該是以后網頁安全防護的主流。
此文為轉載學習，附上原文地址：https://www.cnblogs.com/lvhw/p/7107436.html