大家好，又見面了，我是你們的朋友全棧君。
iframe标簽
小明說，iframe是能耗最高的一個元素，盡量減少使用。
小藍說，iframe的安全性太差，盡量減少使用。
雖然他們說的是真的，但是iframe的強大功能是不容忽視的，而且現在不乏公司正在使用它。
标簽規定一個内聯架構。一個内聯架構被用來在目前 HTML 文檔中嵌入另一個文檔。
所有的主流浏覽器都支援标簽。你可以把提示的文字放到 和 裡面，這樣不支援 的浏覽器就會出現提示的文字。。
1、定義和用法
name 屬性規定 iframe 的名稱。
name 元素的 name 屬性用于在 JavaScript 中引用元素，或者作為 a 或 form 元素的 target 屬性的值，或者作為 input 或 button 的 formtarget 屬性的值。
2、HTML 4.01 與 HTML5之間的差異
無。
2、1HTML 4.01 與 XHTML 之間的差異
在 XHTML 中，name 屬性以廢棄，并将被移除。請使用 id 屬性代替。
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支援 iframe 元素。
3、浏覽器支援
Internet ExplorerFirefoxOperaGoogle ChromeSafari
所有主流浏覽器都支援 name 屬性。
4、iframe 的常用屬性：
name ： 規定 的名稱。
width： 規定 的寬度。
height ：規定 的高度。
src ：規定在 中顯示的文檔的 URL。
frameborder ： 規定是否顯示 周圍的邊框。 (0為無邊框，1位有邊框)。
align ： 規定如何根據周圍的元素來對齊 。 (left,right,top,middle,bottom)。
scrolling ： 規定是否在 中顯示滾動條。 (yes,no,auto)
具體詳情請參考W3school：https://www.w3school.com.cn/tags/tag_iframe.asp
5、iframe案例
代碼片
.
// iframe自定義屬性
<div class="page-content" style="width: 100%;">
<iframe src="main.html" width="100%" height="1020px" frameborder="0" scrolling="yes" name="mainFrame" seamless="1" id="external-frame" onload="setIframeHeight(this)"></iframe>
</div> 複制
6、那如何擷取iframe裡面的内容呢？
// 擷取iframe内容
var iframe = document.getElementById("myrame"); //擷取iframe标簽
var iwindow = iframe.contentWindow; //擷取iframe的window對象
var idoc = iwindow.document; //擷取iframe的document對象
console.log(idoc.documentElement); //擷取iframe的html
console.log("body",idoc.body); 複制
點選跳轉iframe标簽頁面
a标簽裡必須有href、target倆個屬性；href屬性寫跳轉頁面或者路徑即可，target屬性必須寫為iframe标簽裡的name屬性裡的屬性值。當點選這個路徑即可跳轉到自定義頁面
代碼片
.
// 配合iframe跳轉的必要自定義屬性
<a href="main.html" target="mainFrame">
<i class="icon-home"></i>
跳轉Iframe頁面
</a> 複制
1、iframe 透明
在transparentBody.htm檔案的标簽中，我已經加入了style=“background-color=transparent” 通過以下四種IFRAME的寫法我想大概你對iframe背景透明效果的實作方法應該會有個清晰的了解：
2、iframe 的優缺點
優點：
重載頁面時不需要重載整個頁面，隻需要重載頁面中的一個架構頁（減少資料的傳輸，減少網頁的加載時間）；
技術簡單，使用友善，主要應用于不需要搜尋引擎來搜尋的頁面；
友善開發，減少代碼的重複率（比如頁面的header，footer）；
缺點：
會産生很多的頁面，不易于管理；
不易列印；
多架構的頁面會增加服務氣得http請求；
浏覽器的後退按鈕無效等；
釋出者：全棧程式員棧長，轉載請注明出處：https://javaforall.cn/125682.html原文連結：https://javaforall.cn