本文介绍了一种通过JavaScript动态调整IFRAME元素尺寸的方法，确保IFRAME能完全显示其内容而不会出现滚动条。文章还讨论了跨域限制问题，即当IFRAME加载的文档来自不同源时，会触发安全限制。
在下面的示例中，我们最初将 IFRAME 元素的宽度和高度属性设置为了 1。加载之后，我们会检查 IFRAME 中已加载文档正文的 scrollWidth 和 scrollHeight 属性，以查看它是否大于该 IFRAME 的 offsetWidth 和 offsetHeight 属性。然后，我们将宽度和高度属性设置为等于 scrollWidth 和 scrollHeight 属性，再加上一个很小的缓冲余地。
<html>
<head>
<script>...
function window.onload()
...{
if (frName1.document.body.scrollWidth > document.all.fr1.offsetWidth)
...{
document.all.fr1.width = frName1.document.body.scrollWidth + 4;
}
if (frName1.document.body.scrollHeight > document.all.fr1.offsetHeight)
...{
document.all.fr1.height = frName1.document.body.scrollHeight + 4;
}
}
</script>
</head>
<body>
<iframe id="fr1" name="frName1" height="1" width="1" src="about:abc<br>defghijklmnopqrst<br>uvwxyz"></iframe>
</body>
</html>
请注意，如果 IFRAME 中加载的文档来自其他域而不是该包含文档，则我们会遇到 Access is denied 错误。这是出于安全方面的原因。
<html><head><script>...function window.onload()...{ if (frName1.document.body.scrollWidth > document.all.fr1.offsetWidth) ...{ document.all.fr1.width = frName1.document.body.scrollWidth + 4; } if (frName1.document.body.scrollHeight > document.all.fr1.offsetHeight) ...{ document.all.fr1.height = frName1.document.body.scrollHeight + 4; }}</script></head><body><iframe id="fr1" name="frName1" height="1" width="1" src="about:abc<br>defghijklmnopqrst<br>uvwxyz"></iframe></body></html>
扫一扫
3357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
