可以缩小iframe的内容吗？

Question

有没有办法在不调整CSS的情况下缩小iframe内部的内容？

那里有任何神奇的"缩放"参数吗？!!!

我有一个600px预览iframe我想在没有滚动条的情况下适合1000px网站...

Answer 1

CSS3可以处理这个问题.这段代码应该可以处理大多数浏览器或简单地减少它以满足您的需求.无需"调整"任何现有的CSS:

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;
}

或者如果你想要内联样式,例如firefox:

<style>
  #IDNAME {
    -moz-transform: scale(0.25, 0.25); 
    -moz-transform-origin: top left;
  }
</style>

然后,当然只需将ID添加到您的iframe:

<iframe id="IDNAME" src="http://www.whatever.com"></iframe>

Answer 2

如果您控制Iframe内容,您可能会发现我的这个小黑客很有用:http://futtta.be/squeezeFrame/

这是一个跨浏览器的独立javascript,尝试使用css zoom和moz-transform自动调整它调用的页面大小到iframe的可用大小.

Answer 3

你绝对可以做到这一点,就好了.

只需告诫你需要转换iframe,并将其置于绝对位置:

iframe {
  /* Set the width of the iframe the size you want to transform it FROM */
  width: 1108px;
  height: 710px;
  /* apply the transform */
  -webkit-transform:scale(0.25);
  -moz-transform:scale(0.25);
  -o-transform:scale(0.25);
  transform:scale(0.25);
  /* position it, as if it was the original size */
  position: absolute;
  left: -400px;
  top: -200px;
}

要查看示例,请访问:http://jsfiddle.net/8DVNa/

Answer 4

恐怕不是。您唯一的选择是使用特定于站点的 CSS 修饰符来减小字体和元素大小。