使用iFrame填充窗口并隐藏滚动条？

Question

使用iFrame填充窗口并隐藏滚动条？

9

如何使我的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>

- Zolomon

2个回答

-1

我也遇到了与滚动条以及未显示上下文菜单的相同问题，尽管这些元素都已被禁用。经过几天的尝试解决它们，我偶然发现了这篇帖子，它对我有所帮助，但是我还找到了一篇关于具有三个代码示例的灵活Web播放器的帖子。以下是链接：

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

下载包

如果你想要一个空白的工作表，可以使用索引文件，在你从Unity导出的.html文件中替换现有的代码，将"unityObject.embedUnity"链接替换为你自己位于服务器上的.html文件的链接。

要使用iframe在你的页面中嵌入播放器，请添加：

准备好了。

希望这有所帮助。

^_^

- codeloopy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andy E · Accepted Answer

你应该能够仅使用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 的 body 中设置。

更新
根据您的评论，我使用了以下内容作为测试页面：

<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浏览器上测试，它能够很好地工作并填充整个窗口。