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

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


当前回答

如前所述,我怀疑你做不到。 也许你可以至少缩放文本本身,通过设置一个样式font-size: 80%;。 未经测试,不确定它的工作,不会调整框或图像的大小。

其他回答

如前所述,我怀疑你做不到。 也许你可以至少缩放文本本身,通过设置一个样式font-size: 80%;。 未经测试,不确定它的工作,不会调整框或图像的大小。

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

我想分享一下我的想法,使用上面给出的大部分内容。我还没有检查Chrome浏览器,但据我所知,它在IE、Firefox和Safari浏览器中都可以运行。

这个例子中的具体偏移量和缩放因子适用于Facebook标签的iframe中缩小和居中两个网站(宽度为810px)。

使用的两个网站是一个wordpress网站和一个ning网络。我不是很擅长html,所以这可能已经做得更好,但结果似乎不错。

<style>
    #wrap { width: 1620px; height: 3500px; padding: 0; position:relative; left:-100px; top:0px; overflow: hidden; }
    #frame { width: 1620px; height: 3500px; position:relative; left:-65px; top:0px; }
    #frame { -ms-zoom: 0.7; -moz-transform: scale(0.7); -moz-transform-origin: 0px 0; -o-transform: scale(0.7); -o-transform-origin: 0 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 0 0; }
</style>
<div id="wrap">
    <iframe id="frame" src="http://www.example.com"></iframe>
</div>

#wrap #frame解决方案很好,只要#wrap中的数字是#frame乘以比例因子。它只显示了缩小框架的那一部分。你可以在这里看到它缩小网站,并把它变成pinterest一样的形式(与woodmark jQuery插件):

http://www.genautica.com/sandbox/woodmark-index.html

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

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