我如何能缩放一个iframe的内容(在我的例子中,它是一个HTML页面,而不是一个弹出窗口)在我的网站的页面?
例如,我想以原始大小的80%显示iframe中的内容。
我如何能缩放一个iframe的内容(在我的例子中,它是一个HTML页面,而不是一个弹出窗口)在我的网站的页面?
例如,我想以原始大小的80%显示iframe中的内容。
当前回答
用CSS:
html{
zoom:0.4;
}
?-)
其他回答
所以可能不是最好的解决方案,但似乎还可以。
<IFRAME ID=myframe SRC=.... ></IFRAME>
<SCRIPT>
window.onload = function(){document.getElementById('myframe').contentWindow.document.body.style = 'zoom:50%;';};
</SCRIPT>
显然不是试图修复父元素,只是添加了“缩放:50%”样式到子元素的主体,并使用了一点javascript。
也许可以设置“HTML”元素的样式,但没有尝试。
我不认为HTML有这样的功能。我唯一能想到的是做一些服务器端处理。也许你可以获得你想要服务的网页的图像快照,在服务器上缩放它并将其提供给客户端。然而,这将是一个非交互式页面。(也许imagemap可以有链接,但仍然如此。)
另一个想法是有一个服务器端组件来修改HTML。有点像火狐2.0的缩放功能。这当然不是完美的变焦,但总比没有好。
除此之外,我没有别的办法了。
如前所述,我怀疑你做不到。 也许你可以至少缩放文本本身,通过设置一个样式font-size: 80%;。 未经测试,不确定它的工作,不会调整框或图像的大小。
您不需要用额外的标记来包装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,你需要缩放尺寸。
#wrap #frame解决方案很好,只要#wrap中的数字是#frame乘以比例因子。它只显示了缩小框架的那一部分。你可以在这里看到它缩小网站,并把它变成pinterest一样的形式(与woodmark jQuery插件):
http://www.genautica.com/sandbox/woodmark-index.html