我如何能缩放一个iframe的内容(在我的例子中,它是一个HTML页面,而不是一个弹出窗口)在我的网站的页面?
例如,我想以原始大小的80%显示iframe中的内容。
我如何能缩放一个iframe的内容(在我的例子中,它是一个HTML页面,而不是一个弹出窗口)在我的网站的页面?
例如,我想以原始大小的80%显示iframe中的内容。
当前回答
在花了几个小时试图让它在IE8、9和10中工作之后,下面是对我有效的方法。
这个精简的CSS工作在FF 26, Chrome 32, Opera 18,和IE9 -11 2014年1月7日:
.wrap
{
width: 320px;
height: 192px;
padding: 0;
overflow: hidden;
}
.frame
{
width: 1280px;
height: 786px;
border: 0;
-ms-transform: scale(0.25);
-moz-transform: scale(0.25);
-o-transform: scale(0.25);
-webkit-transform: scale(0.25);
transform: scale(0.25);
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
对于IE8,设置宽度/高度以匹配iframe,并在.wrap container div中添加-ms-zoom:
.wrap
{
width: 1280px; /* same size as frame */
height: 768px;
-ms-zoom: 0.25; /* for IE 8 ONLY */
}
只需使用您最喜欢的浏览器嗅探方法,有条件地包含适当的CSS,参见是否有一种方法在*.css文件中执行特定于浏览器的条件CSS ?为了一些想法。
IE7是一个失败的原因,因为-ms-zoom直到IE8才出现。
下面是我测试的实际HTML:
<div class="wrap">
<iframe class="frame" src="http://time.is"></iframe>
</div>
<div class="wrap">
<iframe class="frame" src="http://apple.com"></iframe>
</div>
http://jsfiddle.net/esassaman/PnWFY/
其他回答
用CSS:
html{
zoom:0.4;
}
?-)
#wrap #frame解决方案很好,只要#wrap中的数字是#frame乘以比例因子。它只显示了缩小框架的那一部分。你可以在这里看到它缩小网站,并把它变成pinterest一样的形式(与woodmark jQuery插件):
http://www.genautica.com/sandbox/woodmark-index.html
我不认为HTML有这样的功能。我唯一能想到的是做一些服务器端处理。也许你可以获得你想要服务的网页的图像快照,在服务器上缩放它并将其提供给客户端。然而,这将是一个非交互式页面。(也许imagemap可以有链接,但仍然如此。)
另一个想法是有一个服务器端组件来修改HTML。有点像火狐2.0的缩放功能。这当然不是完美的变焦,但总比没有好。
除此之外,我没有别的办法了。
您不需要用额外的标记来包装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,你需要缩放尺寸。
如果你的html是用css样式的,你可能可以链接不同大小的不同样式表。