iframe自动适应高度

最新推荐文章于 2025-05-18 13:16:54 发布

原创最新推荐文章于 2025-05-18 13:16:54 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #xhtml #ViewUI

本文介绍了两种实现iframe自适应高度的技术方案。第一种方案通过JavaScript监听iframe加载完成事件并调整其高度。第二种方案同样使用JavaScript，但适用于不同浏览器环境，确保iframe能够根据内容自动调整大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、第一个适应高度的方案

function iFrameHeight() {

var ifm= document.getElementById("iframepage");

var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;

if(ifm != null && subWeb != null) {

ifm.height = subWeb.body.scrollHeight;

}

</script>

2、别人自适应的方案

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="textml; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script language="javascript" type="text/javascript">
function dyniframesize(down) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(down);
}
else{
eval('pTar = ' + down + ';');
}
if (pTar && !window.opera){
//begin resizing iframe
pTar.style.display="block"
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
//ns6 syntax
pTar.height = pTar.contentDocument.body.offsetHeight +20;
pTar.width = pTar.contentDocument.body.scrollWidth+20;
}
else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight;
pTar.width = pTar.Document.body.scrollWidth;
}
}
}
</script>
<iframe src ="b.html" frameborder="0" marginheight="0" marginwidth="0" frameborder="0" scrolling="auto" id="ifm" name="ifm" onload="javascript:dyniframesize('ifm');" width="100%">
</iframe>

</body>
</html>