深入理解iframe

1、深入理解iframe深化理解iframe一、什么是 iframe iframe 用于在頁面內(nèi)顯示頁面，用法 會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）二、iframe 的常用屬性 1、width定義 iframe 的寬度 2、height定義 iframe 的高度 3、name規(guī)定 iframe 的名稱 4、frameborder規(guī)定是否顯示邊框，值為 0（不顯示）和 1（顯示） 5、scrolling規(guī)定是否在 iframe 中顯示滾動(dòng)條，值為 yes、no、auto 6、src設(shè)置 iframe 的地址（頁面/） 7、srcdoc用來替換 iframe 中 html、body 里的內(nèi)容

2、（ ie 不支持） 8、sandbox對(duì) iframe 舉行內(nèi)容限制，值為allow-formsallow-same-originallow-scriptsallow-top-navigation.支持 ie10+ 三、獵取 iframe 中的內(nèi)容 1、獵取 iframevar iframe = document.getelementbyid("iframe1"); 2、iframe.contentwindow獵取iframe的window對(duì)象var iwindow = iframe.contentwindow;3、iframe.contentdocumen

3、t獵取iframe的document對(duì)象var idoc = iwindow.document; 4、window.frames&39;name&39;這種辦法同樣可以獵取 window 對(duì)象var iwindow = window.frames&39;name&39; 四、在 iframe 中獵取父級(jí)內(nèi)容1、window.parent獵取上一級(jí) window 對(duì)象（ iframe 可以有多層用法） 2、window.top獵取最頂級(jí)容器的 window 對(duì)象，即打開頁面時(shí)的文檔 3、window.self返回自身 window 對(duì)象 五、iframe 的長輪詢

4、 長輪詢就是在 ajax 的 readystate = 4的時(shí)，再次執(zhí)行原函數(shù)。這里用法 iframe 也是一樣，異步創(chuàng)建 iframe，然后 reloadvar iframecon = docuemnt.queryselector(&39;container&39;), text; /傳遞的信息 var iframe = document.createelement(&39;iframe&39;), iframe.id = "frame", iframe.style = "display:none;&

5、;quot;, ="polling", iframe.src="target.html" iframecon.appendchild(iframe); iframe.onload= function() var iloc = iframe.contentwindow.location, idoc = iframe.contentdocument; settimeout(function() text = idoc.getelementsbytagname(&39;body&39;)0.

6、textcontent; console.log(text); iloc.reload(); /刷新頁面,再次獵取信息，并且會(huì)觸發(fā)onload函數(shù) ,2000); 這樣就可以實(shí)現(xiàn) ajax 長輪詢的效果。 固然，這里只是用法 reload 舉行獵取，也可以添加 iframe 和刪除 iframe 的方式，舉行發(fā)送信息，這些都是按照詳細(xì)場景應(yīng)用的。另外在 iframe 中還可以實(shí)現(xiàn)異步加載 js 文件，不過，iframe 和主頁是分享銜接池的，現(xiàn)在基本上都被 xhr 和 hard calllback 取締了 六、自適應(yīng) iframe - 廣告嵌入廣告通常與原文無關(guān)，假如挺直在某個(gè) div 下嵌套

7、，會(huì)造成網(wǎng)頁布局的紊亂，而且還需要引入額外的 css 和 js 文件，極大降低了網(wǎng)頁的平安性。 這些全部的弊端，都可以用法iframe舉行解決?？梢詫?iframe 理解為一個(gè)沙盒，里面的內(nèi)容能夠被 top window 徹低控制，而且，主頁的 css 樣式不會(huì)入侵 iframe 里面的樣式默認(rèn)狀況下，iframe 會(huì)自帶滾動(dòng)條，不會(huì)全屏，假如你想自適應(yīng)iframe的話：1、去掉滾動(dòng)條 2、設(shè)置 iframe 的高為 body 的高var iwindow = iframe.contentwindow;var idoc = iwindow.document;iframe.height = ido

8、c.body.offsetheight;另外，還可以添加其它的裝點(diǎn)屬性：屬性效果allowtransparencytrue or false是否允許iframe設(shè)置為透亮，默認(rèn)為falseallowfullscreentrue or false是否允許iframe全屏，默認(rèn)為false 七、iframe 的平安性 1、防嵌套網(wǎng)頁iframe 享有 click 優(yōu)先權(quán)，當(dāng)有人在偽造的主頁中舉行點(diǎn)擊的話，假如點(diǎn)在 iframe 上，則會(huì)默認(rèn)是在操作 iframe 的頁面。 所以，釣魚網(wǎng)站就是用法這個(gè)技術(shù)，通過誘導(dǎo)用戶舉行點(diǎn)擊。為了防止網(wǎng)站被釣魚，可以用法 window.top 來防止你的網(wǎng)頁被 i

9、frame，即限定你的網(wǎng)頁不能被嵌套在任何網(wǎng)頁內(nèi)：/iframe2.htmlif(window != window.top) window.top.location.href = correcturl; 2、x-frame-optionsx-frame-options 是一個(gè)相應(yīng)頭，主要是描述服務(wù)器的網(wǎng)頁資源的 iframe 權(quán)限，有3個(gè)選項(xiàng)：deny：當(dāng)前頁面不能被嵌套 iframe 里，即便是在相同域名的頁面中嵌套也不允許，也不允許網(wǎng)頁中有嵌套 iframesameorigin：iframe 頁面的地址只能為同源域名下的頁面allow-from：可以在指定的 origin url 的 if

10、rame 中加載容易實(shí)例：x-frame-options: deny否決任何iframe的嵌套哀求x-frame-options: sameorigin只允許同源哀求，例如網(wǎng)頁為 底下的全部網(wǎng)頁可以嵌入此網(wǎng)頁，但是 以外的網(wǎng)頁不能嵌入x-frame-options: allow-from 只允許指定網(wǎng)頁的iframe哀求，不過兼容性較差chrome不支持x-frame-options 其實(shí)就是將前端 js 對(duì) iframe 的把控交給服務(wù)器來舉行處理/jsif(window != window.top) window.top.location.href = window.location.hr

11、ef; /等價(jià)于x-frame-options: deny/jsif (top.location.hostname != window.location.hostname) top.location.href =window.location.href;/等價(jià)于x-frame-options: sameorigin該屬性是對(duì)頁面的 iframe 舉行一個(gè)主要限制，不過，涉及 iframe 的 header 可不止這一個(gè)，另外還有一個(gè) content security policy，同樣也可以對(duì) iframe 舉行限制 3、sandboxsandbox 就是用來給指定 iframe 設(shè)置一個(gè)沙盒

12、模型限制 iframe 的更多權(quán)限sandbox 是 h5 的一個(gè)新屬性，ie10+支持啟用方式就是用法 sandbox 屬性：這樣會(huì)對(duì)iframe頁面舉行一系列的限制:script 腳本不能執(zhí)行不能發(fā)送 ajax 哀求不能用法本地存儲(chǔ)，即 localstorage，cookie 等不能創(chuàng)建新的彈窗和 window不能發(fā)送表單不能加載額外插件比如 flash 等同時(shí)可以放寬一點(diǎn)權(quán)限。在 sandbox 里面舉行一些容易設(shè)置常用的配置項(xiàng)有:配置效果allow-forms允許舉行提交表單allow-scripts運(yùn)行執(zhí)行腳本allow-same-origin允許同域哀求，比如 ajax，stora

13、geallow-top-navigation允許 iframe 能夠主導(dǎo) window.top 舉行頁面跳轉(zhuǎn)allow-popups允許 iframe 中彈出新窗口，比如 window.open，target="_blank"allow-pointer-lock在 iframe 中可以鎖定鼠標(biāo)，主要和鼠標(biāo)鎖定有關(guān) 可以通過在 sandbox 里，添加允許舉行的權(quán)限.這樣可以保證 js 腳本的執(zhí)行，但是禁止 iframe 里的 javascript 執(zhí)行 top.location = self.location八、iframe 的局限 1、創(chuàng)建比普通的 dom

14、 元素慢了 1-2 個(gè)數(shù)量級(jí)iframe 的創(chuàng)建比其它包括 scripts 和 css 的 dom 元素的創(chuàng)建慢了 1-2 個(gè)數(shù)量級(jí)，用法 iframe 的頁面普通不會(huì)包含太多 iframe，所以創(chuàng)建 dom 節(jié)點(diǎn)所花費(fèi)的時(shí)光不會(huì)占很大的比重。但帶來一些其它的問題：onload 大事以及銜接池（connection pool） 2、堵塞頁面加載準(zhǔn)時(shí)觸發(fā) window 的 onload 大事是十分重要的。onload 大事觸發(fā)使掃瞄器的 忙 指示器停止，告知用戶當(dāng)前網(wǎng)頁已經(jīng)加載完畢。當(dāng) onload 大事加載延遲后，它給用戶的感覺就是這個(gè)網(wǎng)頁十分慢。window 的 onload 大事需要在全部

15、 iframe 加載完畢后（包含里面的元素）才會(huì)觸發(fā)。在 safari 和 chrome 里，通過 javascript 動(dòng)態(tài)設(shè)置 iframe 的 src 可以避開這種堵塞狀況 3、唯一的銜接池掃瞄器只能開少量的銜接到 web 服務(wù)器。比較老的掃瞄器，包含 internet explorer 6 & 7 和 firefox 2，只能對(duì)一個(gè)域名（hostname）同時(shí)打開兩個(gè)銜接。這個(gè)數(shù)量的限制在新版本的掃瞄器中有所提高。safari 3+ 和 opera 9+ 可同時(shí)對(duì)一個(gè)域名打開 4 個(gè)銜接，chrome 1+, ie 8 以及 firefox 3 可以同時(shí)打開 6 個(gè)絕大部分掃瞄器，主頁面和其中的 iframe 是分享這些銜接的。這意味著 iframe 在加載資源時(shí)可能用光了全部的可用銜接，從