HTML<iframe>标签怎么使用？HTML<iframe>标签自适应高度的4种简单方法-木庄网络博客

本文摘自PHP中文网，作者寻∝梦，侵删。

HTML<iframe>标签怎么使用？HTML<iframe>标签自适应高度的4种简单方法你知道吗？本篇文章为大家详细的介绍了HTML<iframe>标签怎么使用和四种HTML<iframe>标签自适应高度简单的方法。

HTML <iframe> 标签是什么：

一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

HTML <iframe> 标签怎么使用：

标记一个内联框架：

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

HTML<iframe>标签属性：

HTML<iframe>标签基本使用：

使用场景：页面大部分相同，少部分不一样。比如系统，每一个页面的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('external-frame'));
};

2.针对知道的iframe的ID调用：

只要修改以上的iframe的ID即可了。或者你可以直接在iframe里面写代码，我们一般为了不污染HTML代码，建议使用上面的代码。

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