Question

如何让我的iframe填满窗口而不显示任何滚动条？

这适用于IE6，如果可能的话，我想让它适用于所有浏览器：

<iframe name=iframe1 src="theSiteToShow.html"  width="100%" height="100%" frameborder="0" marginheight="10" marginwidth="10"></iframe>
<script type="text/javascript">
function resizeIframe() {
    var height = document.documentElement.clientHeight;
    height -= document.getElementById('frame').offsetTop;

    // not sure how to get this dynamically
    height -= 20; /* whatever you set your body bottom margin/padding to be */

    document.getElementById('frame').style.height = height +"px";

};
document.getElementById('frame').onload = resizeIframe;
window.onresize = resizeIframe;
</script>

Answer 1

你应该只能使用CSS，而不需要javascript。以下适用于IE6 +，Google Chrome和Safari：

<style type="text/css">
body {
   margin: 0;
   overflow: hidden;
}
#iframe1 {
    position:absolute;
    left: 0px;
    width: 100%;
    top: 0px;
    height: 100%;
}
</style>

<iframe id="iframe1" name="iframe1" frameborder="0"  
     src="theSiteToShow.html"></iframe>

您的边距应设置在theSiteToShow.html的正文中。

<强>更新
在您发表评论之后，我将以下内容用作测试页面：

<html> 
<head>
<style type="text/css">
body {
   margin: 0;
   overflow: hidden;
}
#iframe1 {
    position:absolute;
    left: 0px;
    width: 100%;
    top: 0px;
    height: 100%;
}
</style>
</head> 
<body> 
<iframe id="iframe1" src="http://stackoverflow.com" frameborder="0"></iframe>
</body> 
</html>

在IE6 +，Chrome，Safari和Firefox中测试过，它可以很好地工作并填满整个窗口。

Answer 2

我遇到了滚动条以及无上下文菜单出现的相同问题，即使所有这些元素都已被禁用。经过几天尝试解决这些问题后，我偶然发现了这篇文章，这有点帮助，但是我带着三个代码示例找到了关于灵活网页播放器的帖子。这是链接：

http://virtualplayground.d2.pl/?p=367#comment-224

Download package

如果要使用空白工作表，请使用索引文件，替换导出的.html文件中的现有代码（来自Unity导出），将“unityObject.embedUnity”链接替换为您自己的.html文件链接位于您的服务器上。

使用iframe添加将播放器嵌入您的页面：

锁定并加载。

希望这会有所帮助。

^ _ ^

用iFrame填充窗口而不显示滚动条？

2 个答案: