HTML<iframe>標(biāo)簽怎么使用？HTML<iframe>標(biāo)簽自適應(yīng)高度的4種簡(jiǎn)單方法你知道嗎？本篇文章為大家詳細(xì)的介紹了HTML<iframe>標(biāo)簽怎么使用和四種HTML<iframe>標(biāo)簽自適應(yīng)高度簡(jiǎn)單的方法。

HTML <iframe> 標(biāo)簽是什么：

<iframe> 標(biāo)簽規(guī)定一個(gè)內(nèi)聯(lián)框架。

一個(gè)內(nèi)聯(lián)框架被用來(lái)在當(dāng)前 HTML 文檔中嵌入另一個(gè)文檔。

HTML <iframe> 標(biāo)簽怎么使用：

<iframe> 標(biāo)簽會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架，有效地將另一個(gè) HTML 頁(yè)面嵌入到當(dāng)前頁(yè)中。請(qǐng)參考以下的實(shí)例：

標(biāo)記一個(gè)內(nèi)聯(lián)框架：

<iframe src="//www.w3cschool.cn"></iframe>

HTML<iframe>標(biāo)簽屬性：

HTML<iframe>標(biāo)簽基本使用：

使用場(chǎng)景：頁(yè)面大部分相同，少部分不一樣。比如系統(tǒng)，每一個(gè)頁(yè)面的left_nav和top內(nèi)容一致，右下邊內(nèi)容在改變。

優(yōu)點(diǎn)：提高頁(yè)面代碼的重復(fù)使用率，讓我們偷懶。

缺點(diǎn)：頁(yè)面url地址沒(méi)有改變。

iframe高度自適應(yīng)的3個(gè)方法:

iframe內(nèi)容未知，高度可預(yù)測(cè)

這個(gè)時(shí)候，我們可以給它添加一個(gè)默認(rèn)的CSS的min-height值，然后同時(shí)使用JavaScript改變高度。常用的兼容代碼有：

1.（如果在同個(gè)頂級(jí)域名下，不同子域名之間互通信息，設(shè)置document.domain="caibaojian.com")

// document.domain = "caibaojian.com";
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow    iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight    iframeWin.document.body.scrollHeight;
}}
};
window.onload = function () {
setIframeHeight(document.getElementById('external-frame'));
};

2.針對(duì)知道的iframe的ID調(diào)用：

只要修改以上的iframe的ID即可了�；蛘吣憧梢灾苯釉趇frame里面寫(xiě)代碼，我們一般為了不污染HTML代碼，建議使用上面的代碼。

<iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>

3.內(nèi)容寬度變化的iframe高度自適應(yīng)：

function iframeAutoFit(iframeObj){
setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200)
}

4.打開(kāi)調(diào)試運(yùn)行窗口可以看到運(yùn)行：

<iframe src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe>
<script type="text/javascript">
function reinitIframe(){
var iframe = document.getElementById("test");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
console.log(height);
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
</script>

提示欄：

提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之間，這樣就可以應(yīng)對(duì)不支持 <iframe> 的瀏覽器。

提示：使用 CSS 為 <iframe> （包括滾動(dòng)條）定義樣式。

提示：<iframe> 標(biāo)簽主要用于那些多個(gè)網(wǎng)頁(yè)的共有部分，如導(dǎo)航欄、廣告欄等。

HTML 4.01 與 HTML5之間的差異:

HTML5 新增了一些新的屬性，同時(shí)去掉了 HTML 4.01 中的一些屬性。

HTML 與 XHTML 之間的差異:

在 XHTML 中，name 屬性已被廢棄，并將被去掉。請(qǐng)使用 id 屬性代替。

【相關(guān)推薦】

HTML5新增的結(jié)構(gòu)元素有哪些？HTML5新增的結(jié)構(gòu)元素的用法（推薦）

HTML5中的article標(biāo)簽是什么？HTML5中的article元素用在什么地方？

以上就是HTML<iframe>標(biāo)簽怎么使用？HTML<iframe>標(biāo)簽自適應(yīng)高度的4種簡(jiǎn)單方法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！