Javascript / CSS:设置(firefox)iframe的缩放级别?

Posted

技术标签:

【中文标题】Javascript / CSS:设置(firefox)iframe的缩放级别?【英文标题】:Javascript / CSS: set (firefox) zoom level of iframe? 【发布时间】:2011-06-07 08:02:49 【问题描述】:

我想创建一个包含多个 iframe 显示不同页面的页面 - 一种“并排浏览多个页面”类型的东西。问题是这样做时,视口非常小,我只能看到每个页面的左上角。

有没有办法将 iframe 设置为有效地进行几次 firefox 的缩小 (ctrl-minus) 以便整个页面可见?我并不特别在意文字是否清晰,只要我能基本看到页面的样子即可。

我不需要它是跨浏览器的(为了我的目的,它只需要在最新的 Firefox 中工作)虽然显然跨浏览器解决方案对于其他需要它并偶然发现的人来说更可取这个问题。

【问题讨论】:

是否认为多个 iframe 可以显示您的网页或多个域的网页? 在这种特殊情况下,所有 iframe 都指向同一域中的页面 【参考方案1】:

我得到了这样的适当结果(仅在 Chromium 中测试):

CSS:

<style>
#iframe 
    -moz-transform: scale(0.25, 0.25) translate(-150%, -150%);
    -webkit-transform: scale(0.25, 0.25) translate(-150%, -150%);
    -o-transform: scale(0.25, 0.25) translate(-150%, -150%);
    transform: scale(0.25, 0.25) translate(-150%, -150%);

#wrapper 
    width: 256px;
    height: 230px;

</style>

html

<div id="wrapper">
    <iframe id="iframe"   scrollbars="no"></iframe>
</div>

也许这会有所帮助。

【讨论】:

【参考方案2】:

您可以将 css 转换应用于 iframe:

iframe 
    -moz-transform: scale(0.25, 0.25); 
    -webkit-transform: scale(0.25, 0.25); 
    -o-transform: scale(0.25, 0.25);
    -ms-transform: scale(0.25, 0.25);
    transform: scale(0.25, 0.25); 
    -moz-transform-origin: top left;
    -webkit-transform-origin: top left;
    -o-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    border: solid #ccc 10px;

http://jsfiddle.net/6QMcX/

transform origin 属性允许在不改变其位置的情况下对其进行缩放。

这适用于 Webkit、Opera、FF 和 IE9(未经测试)。文本看起来很棒,并且在非常小的尺寸下仍然清晰易读。

【讨论】:

正是我在寻找什么。谢谢!你摇滚 它在 iPad Safari 上无法正常工作。见:***.com/questions/11559700/…

以上是关于Javascript / CSS:设置(firefox)iframe的缩放级别?的主要内容,如果未能解决你的问题,请参考以下文章

javascript 用javascript设置css变量

在 javascript 中使用 .css() 设置细边框

如何从 JavaScript 设置和触发 css 转换

从 JavaScript 设置 CSS 伪类规则

如何覆盖由 jquery/javascript 设置的 css 高度?

每天一个JavaScript实例-展示设置和获取CSS样式设置