我如何能缩放一个iframe的内容(在我的例子中,它是一个HTML页面,而不是一个弹出窗口)在我的网站的页面?

例如,我想以原始大小的80%显示iframe中的内容。


当前回答

Kip的解决方案应该在Opera和Safari上工作,如果你改变CSS为:

<style>
    #wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
    #frame { width: 800px; height: 520px; border: 1px solid black; }
    #frame {
        -ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.75);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;
    }
</style>

您可能还想在#frame上指定overflow: hidden以防止滚动条。

其他回答

所以可能不是最好的解决方案,但似乎还可以。

<IFRAME ID=myframe SRC=.... ></IFRAME>

<SCRIPT>
    window.onload = function(){document.getElementById('myframe').contentWindow.document.body.style = 'zoom:50%;';};
</SCRIPT>

显然不是试图修复父元素,只是添加了“缩放:50%”样式到子元素的主体,并使用了一点javascript。

也许可以设置“HTML”元素的样式,但没有尝试。

这是我在一个宽度为890px的页面上的解决方案

#frame { 
overflow: hidden;
position: relative;
width:1044px;
height:1600px;
-ms-zoom: 0.85;
-moz-transform: scale(0.85);
-moz-transform-origin: 0px 0;
-o-transform: scale(0.85);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.85);
-webkit-transform-origin: 0 0; 

}

如果你的html是用css样式的,你可能可以链接不同大小的不同样式表。

对于那些在IE中遇到困难的人,可以使用下面建议的-ms-zoom,并在#wrap div上使用缩放功能,而不是iframe id。根据我的经验,使用缩放函数尝试缩放#frame的iframe div,它将缩放iframe的大小,而不是其中的内容(这是你想要的)。

就像这样。适用于我的IE8, Chrome和FF。

#wrap {
  overflow: hidden;
  position: relative;
  width:800px;
  height:850px;
  -ms-zoom: 0.75;
}

您不需要用额外的标记来包装iframe。只要确保你增加iframe的宽度和高度,就像你缩小iframe一样。

例如,将iframe内容缩放到80%:

#frame { /* Example size! */
    height: 400px; /* original height */
    width: 100%; /* original width */
}
#frame {
    height: 500px; /* new height (400 * (1/0.8) ) */
    width: 125%; /* new width (100 * (1/0.8) )*/

    transform: scale(0.8); 
    transform-origin: 0 0;
}

基本上,为了获得相同大小的iframe,你需要缩放尺寸。