iframe用法1

最新推荐文章于 2023-04-19 14:16:12 发布

cymbidium999

最新推荐文章于 2023-04-19 14:16:12 发布

阅读量708

点赞数

分类专栏：编程语言

编程语言专栏收录该内容

36 篇文章 0 订阅

订阅专栏

写一个js文件，取名叫iframefit.js文件，内容如下：

function iframeAutoFit()
{
try
{
if(window!=parent)
{
var a = parent.document.getElementsByTagName("IFRAME");
for(var i=0; i<a.length; i++) //author:meizz
{
if(a[i].contentWindow==window)
{
var h1=0, h2=0, d=document, dd=d.documentElement;
a[i].parentNode.style.height = a[i].offsetHeight +"px";
a[i].style.height = "10px";
if(dd && dd.scrollHeight) h1=dd.scrollHeight;
if(d.body) h2=d.body.scrollHeight;
var h=Math.max(h1, h2);
if(document.all){h += 4;}
if(window.opera){h += 1;}
a[i].style.height = a[i].parentNode.style.height = h +"px";
}
}
}
}
catch (ex){}
}

if(window.attachEvent)
{
window.attachEvent("onload", iframeAutoFit);
}
else if(window.addEventListener)
{
window.addEventListener('load', iframeAutoFit, false);
}

iframe内的页面命名为child.html，内容如下：

<html>
<head>
<script src="/javascript/iframefit.js" type="text/javascript" ></script>
</head>
<body>
<div>
<table border="0" width="200" style="height: 400px; background-color: black">
<tr>
<td></td>
</tr>
</table>
</body>
</html>

拥有iframe的页面为index.html，内容如下：

<html>
<head></head>
<body>
<div><iframe src="child.html" frameBorder="0" scrolling="no"></iframe></div>
</body>
</html>

注意点：
1、3个文件必须在同一目录下，如有需要要更改路径
2、js文件是在child.html中包括的，而不是在index文件中
3、我只是举了个例子，具体实现你可以按照自己需求改一下