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

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


当前回答

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

其他回答

如果您希望iframe及其内容在窗口调整大小时缩放,您可以将以下设置为窗口的resize事件以及iframes onload事件。

function()
{
    var _wrapWidth=$('#wrap').width();
    var _frameWidth=$($('#frame')[0].contentDocument).width();

    if(!this.contentLoaded)
      this.initialWidth=_frameWidth;
    this.contentLoaded=true;
    var frame=$('#frame')[0];

    var percent=_wrapWidth/this.initialWidth;

    frame.style.width=100.0/percent+"%";
    frame.style.height=100.0/percent+"%";

    frame.style.zoom=percent;
    frame.style.webkitTransform='scale('+percent+')';
    frame.style.webkitTransformOrigin='top left';
    frame.style.MozTransform='scale('+percent+')';
    frame.style.MozTransformOrigin='top left';
    frame.style.oTransform='scale('+percent+')';
    frame.style.oTransformOrigin='top left';
  };

这将使iframe及其内容缩放到包装div的100%宽度(或任何你想要的百分比)。作为一个额外的好处,你不必将框架的css设置为硬编码值,因为它们都是动态设置的,你只需要担心你想要如何显示wrap div。

我已经测试过了,它可以在chrome, IE11和firefox上运行。

我刚测试过,对我来说,其他的解决方案都不奏效。 我只是简单地尝试了一下,它在Firefox和Chrome上运行得很好。

<div class='wrap'>
  <iframe ...></iframe>
</div>

还有css:

.wrap {
  width: 640px;
  height: 480px;
  overflow: hidden;
}

iframe {
  width: 76.92% !important;
  height: 76.92% !important;
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

这将所有内容放大23.08%,相当于原始版本比嵌入式版本大30%。(宽度/高度百分比当然需要相应调整(1/scale_factor))。

用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”元素的样式,但没有尝试。

我认为你可以通过javascript(通过document.body.clientWidth等)计算你想要的高度和宽度,然后像这样将iframe注入你的HTML:

var element = document.getElementById("myid");
element.innerHTML += "<iframe src='http://www.google.com' height='200' width='" + document.body.clientWidth * 0.8 + "'/>";

我没有在IE6中测试这个功能,但它似乎与好版本一起工作:)