某大咖說: "iframe是能耗最高的一個元素，請儘可能減小使用"
某大牛說: "iframe安全性太差，請儘可能減小使用"
...
wtf, 大家知不知道大家這樣澆滅了多少孩紙學習iframe的熱情和決心。 雖然，大家這樣說的我竟沒法反駁，可是iframe強大功能是不容忽視的。 能夠看看各大郵箱網站是否還在使用iframe，查查知乎iframe. iframe不死，我心不滅。如今給你們安利一下iframe.javascript
iframe基本內涵
一般咱們使用iframe直接直接在頁面嵌套iframe標籤指定src就能夠了。php
<iframe src="demo_iframe_sandbox.htm"></iframe>
可是，有追求的咱們，並非想要這麼low的iframe. 咱們來看看在iframe中還能夠設置些什麼屬性css
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首部是否同樣，下面會有講解，這裏只是說起。
同域不一樣域的問題:html
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系列對象)html5
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
實際狀況如:
java
另外更簡單的方式是，結合Name屬性，經過window提供的frames獲取.node
<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對象，即web
window.frames['ifr1']===window
這裏就看你想用哪種方式獲取window對象，二者都行，不過本人更傾向於第二種使用frames[xxx].由於，字母少啊喂~ 而後，你就能夠操控iframe裏面的DOM內容。ajax
在iframe中獲取父級內容
同理，在同域下，父頁面能夠獲取子iframe的內容，那麼子iframe一樣也能操做父頁面內容。在iframe中，能夠經過在window上掛載的幾個API進行獲取.
window.parent 獲取上一級的window對象，若是仍是iframe則是該iframe的window對象 window.top 獲取最頂級容器的window對象，即，就是你打開頁面的文檔 window.self 返回自身window的引用。能夠理解 window===window.self(腦殘)
如圖: 來個栗子~
ok, 獲取了以後，咱們就能夠進行相關操做了。 在同域的iframe中，咱們能夠巧妙的使用iframe的黑科技來實現一些trick.
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進行限制，並且，他應該是之後網頁安全防禦的主流。
CSP之頁面防禦
和X-Frames-Options同樣，都須要在服務器端設置好相關的Header. CSP 的做用， 真的是太大了，他可以極大的防止你的頁面被XSS攻擊，並且能夠制定js,css,img等相關資源的origin，防止被惡意注入。不過他的兼容性，也是渣的一逼。目前支持Edge12+ 以及 IE10+。
並且目前市面上，流行的是3種CSP頭，以及各類瀏覽器的兼容性
使用主要是在後端服務器上配置，在前端，咱們能夠觀察Response Header 裏是否有這樣的一個Header:
Content-Security-Policy: default-src 'self'
這就代表，你的網頁是啓用CSP的。
一般咱們能夠在CSP後配置各類指定資源路徑，有
default-src, script-src, style-src, img-src, connect-src, font-src, object-src, media-src, sandbox, child-src, ...
若是你未指定的話，則是使用default-src規定的加載策略.
默認配置就是同域: default-src "self".
這裏和iframe有一點瓜葛的就是 child-src 和 sandbox.
child-src就是用來指定iframe的有效加載路徑。其實和X-Frame-Options中配置allow-origin是一個道理。不過,allow-origin 沒有獲得廠商們的支持。
而，sandbox其實就和iframe的sandbox屬性（下文介紹）,是同樣同樣的，他能夠規定來源可以帶有什麼權限.
來個demo:
Content-Security-Policy: child-src 'self' http://example.com; sandbox allow-forms allow-same-origin
此時，iframe的src就只能加載同域和example.com頁面。 最後再補充一點: 使用CSP 可以很好的防止XSS攻擊，原理就是CSP會默認escape掉內聯樣式和腳本，以及eval執行。可是，你可使用srcipt-src進行下降限制.
Content-Security-Policy: script-src 'unsafe-inline'
若是想更深刻的瞭解CSP,能夠參閱:CSP,中文CSP,H5rock之CSP
ok, 上面基本上就是防止本身頁面被嵌套而作的一些安全防禦工做。 固然，咱們面臨的安全問題還有一個，就是當iframe別人的頁面時，咱們須要對其進行安全設限，雖然，跨域時iframe的安全性會大不少，可是，互聯網是沒有安全的地方。在之前，咱們會進行各類trick來防止本身的頁面被污染，如今h5提供的一個新屬性sandbox能夠很好的解決這個問題。
sandbox
sandbox就是用來給指定iframe設置一個沙盒模型限制iframe的更多權限.
sandbox是h5的一個新屬性,IE10+支持(md~).
啓用方式就是使用sandbox屬性:
<iframe sandbox src=」...」></iframe>
這樣會對iframe頁面進行一系列的限制:
1. script腳本不能執行 2. 不能發送ajax請求 3. 不能使用本地存儲，即localStorage,cookie等 4. 不能建立新的彈窗和window 5. 不能發送表單 6. 不能加載額外插件好比flash等
看到這裏，我也是醉了。 好好的一個iframe，你這樣是否是有點過度了。 不過，你能夠放寬一點權限。在sandbox裏面進行一些簡單設置
<iframe sandbox=」allow-same-origin」 src=」...」></iframe>
經常使用的配置項有:
| 配置 | 效果 |
|---|---|
| allow-forms | 容許進行提交表單 |
| allow-scripts | 運行執行腳本 |
| allow-same-origin | 容許同域請求,好比ajax,storage |
| allow-top-navigation | 容許iframe可以主導window.top進行頁面跳轉 |
| allow-popups | 容許iframe中彈出新窗口,好比,window.open,target="_blank" |
| allow-pointer-lock | 在iframe中能夠鎖定鼠標，主要和鼠標鎖定有關 |
能夠經過在sandbox裏，添加容許進行的權限.
<iframe sandbox=」allow-forms allow-same-origin allow-scripts」 src=」...」></iframe>
這樣，就能夠保證js腳本的執行，可是禁止iframe裏的javascript執行top.location = self.location。
哎，其實，iframe的安全問題仍是超級有的。好比location劫持，Refers檢查等。 不過目前而言，知道怎麼簡單的作一些安全措施就over了，白帽子們會幫咱們測試的。
resolve iframe跨域
iframe就是一個隔離沙盒，至關於咱們在一個頁面內能夠操控不少個標籤頁同樣。若是踩坑的童鞋應該知道，iframe的解決跨域也是頗有套套的。
首先咱們須要明確什麼是跨域。
瀏覽器判斷你跨沒跨域，主要根據兩個點。 一個是你網頁的協議(protocol)，一個就是你的host是否相同，即，就是url的首部:
window.location.protocol +window.location.host
具體的例子就是:
須要強調的是，url首部必須同樣，好比:二級域名或者IP地址，都算是跨域.
//域名和域名對應ip, 跨域 http://www.a.com/a.js http://70.32.92.74/b.js //統一域名，不一樣二級域名。 跨域 http://www.a.com/a.js http://a.com/b.js
對於第二種方式的跨域（主域相同而子域不一樣）,可使用iframe進行解決。
在兩個不一樣子域下(某一方使用iframe嵌套在另外一方)，
即:
http: //www.foo.com/a.html和http: //script.foo.com/b.html
兩個文件中分別加上document.domain = ‘foo.com’,指定相同的主域，而後,兩個文檔就能夠進行交互。
//b.html是以iframe的形式嵌套在a.html中 //www.foo.com上的a.html document.domain = 'foo.com'; var ifr = document.createElement('iframe'); ifr.src = 'http://script.foo.com/b.html'; ifr.style.display = 'none'; document.body.appendChild(ifr); ifr.onload = function(){ var doc = ifr.contentDocument || ifr.contentWindow.document; // 在這裏操縱b.html alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue); }; //script.foo.com上的b.html document.domain = 'foo.com';
默認狀況下document.domain 是指window.location.hostname. 你能夠手動更改，可是最多隻能設置爲主域名。 一般，主域名就是指不帶www的hostname, 好比: foo.com , baidu.com 。 若是，帶上www或者其餘的前綴，就是二級域名或者多級域名。經過上述設置，相同的domain以後，就能夠進行同域的相關操做。
另外還可使用iframe和location.hash，不過因爲技術out了，這裏就不作介紹了。
H5的CDM跨域與iframe
若是你設置的iframe的域名和你top window的域名徹底不一樣。 則可使用CDM(cross document messaging)進行跨域消息的傳遞。該API的兼容性較好 ie8+都支持.
發送消息: 使用postmessage方法
接受消息: 監聽message事件
postmessage
該方法掛載到window對象上，即，使用window.postmessage()調用.
該方法接受兩個參數:postMessage(message, targetOrigin):
message: 就是傳遞給iframe的內容, 一般是string,若是你想傳object對象也能夠。不過使用前請參考這一句話:
意思就是，但願親愛的不要直接傳Object。 若是有條件，可使用是JSON.stringify進行轉化。這樣能保證不會出bug.
targetOrigin: 接受你傳遞消息的域名，能夠設置絕對路徑，也能夠設置""或者"/"。 表示任意域名都行，"/"表示只能傳遞給同域域名。
來個栗子:
<iframe src="http://tuhao.com" name="sendMessage"></iframe> //當前腳本 let ifr = window.frames['sendMessage']; //使用iframe的window向iframe發送message。 ifr.postmessage('give u a message', "http://tuhao.com"); //tuhao.com的腳本 window.addEventListener('message', receiver, false); function receiver(e) { if (e.origin == 'http://tuhao.com') { if (e.data == 'give u a message') { e.source.postMessage('received', e.origin); //向原網頁返回信息 } else { alert(e.data); } } }
當targetOrigin接受到message消息以後,會觸發message事件。 message提供的event對象上有3個重要的屬性，data,origin,source.
data：postMessage傳遞進來的值
origin：發送消息的文檔所在的域
source：發送消息文檔的window對象的代理，若是是來自同一個域，則該對象就是window，可使用其全部方法，若是是不一樣的域，則window只能調用postMessage()方法返回信息
屬性的使用方法，如上頭那個demo 說的。 很貼切， 很完美~
finally iframe
iframe的大概咱們差很少了解了。 想說的是，iframe 在後面會越用越少的。可是應該是不會被w3c標準廢除的。到是前端的發展，真尼瑪太快了，每過一段時間，一個新工具，新技術的出現，好到是好，不過學的真心蛋疼。不過，咱們要以一個大前端的姿態要求咱們，md,如今不學，那何時學~