首頁  >  文章  >  web前端  >  HTML

HTML

一個內嵌框架被用來在目前 HTML 文件中嵌入另一個文件。

HTML

標記一個內嵌框架:

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

HTML

HTML<iframe>標籤怎麼使用? HTML<iframe>標籤自適應高度的4種簡單方法

HTML

#使用場景:頁面大部分相同,少部分不一樣。例如係統,每個頁面的left_nav和top內容一致,右下邊內容在改變。

優點:提高頁面程式碼的重複使用率,讓我們偷懶。

缺點:頁面url位址沒有改變。

iframe高度自適應的3個方法:

iframe內容未知,高度可預測

這個時候,我們可以給它一個默認的CSS的min-height值,然後同時使用JavaScript改變高度。常用的相容程式碼有:

1.(如果在同個頂級網域下,不同子網域之間互通訊息,設定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(&#39;external-frame&#39;));
};

2 .針對知道的iframe的ID呼叫:

只要修改以上的iframe的ID即可了。或者你可以直接在iframe裡面寫程式碼,我們通常為了不污染HTML程式碼,建議使用上面的程式碼。

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

3.內容寬度變化的iframe高度自適應:

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

4.開啟偵錯運行視窗可以看到執行:

<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>

提示列:

提示:您可以把需要的文字放置在 之間,這樣就可以應付不支援

提示:使用 CSS 為

提示:

HTML 4.01 與 HTML5的差異:

#HTML5 新增了一些新的屬性,同時去掉了 HTML 4.01 中的一些屬性。

HTML 與 XHTML 之間的差異:

在 XHTML 中,name 屬性已被廢棄,並將被移除。請使用 id 屬性來代替。

【相關推薦】

HTML5新增的結構元素有哪些? HTML5新增的結構元素的用法(建議)

HTML5中的article標籤是什麼? HTML5的article元素用在什麼地方?


以上是HTML