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

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


当前回答

对于那些在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;
}

其他回答

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以防止滚动条。

跟进lxs的回答:我注意到一个问题,同时有缩放和——webkit-transform标签,似乎混淆了Chrome(版本15.0.874.15),做一个双重缩放的效果。我可以通过用-ms-zoom(只针对IE)替换zoom来解决这个问题,让Chrome只使用——webkit-transform标签,这就解决了问题。

这是我在一个宽度为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; 

}

我找到了一个可以在IE和Firefox中运行的解决方案(至少在当前版本上是这样)。在Safari/Chrome上,iframe被调整到原始大小的75%,但iframe内的内容根本没有缩放。在Opera中,这似乎不起作用。这感觉有点深奥,所以如果有更好的方法,我欢迎建议。

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

...

<p>Some text before the frame</p>
<div id="wrap">
<iframe id="frame" src="test2.html"></iframe>
</div>
<p>Some text after the frame</p>
</body>

注意:我必须在Firefox中使用wrap元素。出于某种原因,在Firefox中,当您将对象缩小75%时,由于布局原因,它仍然使用图像的原始大小。(试着从上面的示例代码中删除div,你就会明白我的意思了。)

我从这个问题中发现了一些。

这些解决方案不适合我(模糊)与Flexbox和iFrame在100%,但如果iFrame使用rem em或百分比单位,那么有一个解决方案看起来很棒:

  window.onload = function(){
    let ifElem = document.getElementById("iframe-id");
    ifElem.contentWindow.document.documentElement.style.fontSize="80%";
  }