如何缩放 iframe 的内容?

Posted

技术标签:

【中文标题】如何缩放 iframe 的内容?【英文标题】:How can I scale the content of an iframe? 【发布时间】:2010-09-15 00:50:24 【问题描述】:

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

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

【问题讨论】:

问题抓取——好的做法?我不这么认为。 典型用例:在在线所见即所得编辑器中预览页面/站点 【参考方案1】:

这些解决方案在 Flexbox 和 100% 的 iFrame 中无法正常工作(模糊),但如果 iframe 使用 rem em 或百分比单位,那么有一个看起来很棒的解决方案:

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

【讨论】:

【参考方案2】:

我刚刚测试过,对我来说,其他解决方案都不起作用。 我只是简单地尝试了一下,它在 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)。

【讨论】:

您还想将overflow: hidden; 添加到.wrap 元素。当你使用iframe width: 200%; height: 200%; transform: scale(0.5); 时,iframe 开始溢出。 这是最先进的方法。谢谢!【参考方案3】:

所以可能不是最好的解决方案,但似乎工作正常。

<IFRAME ID=myframe SRC=.... ></IFRAME>

<SCRIPT>
    window.onload = function()document.getElementById('myframe').contentWindow.document.body.style = 'zoom:50%;';;
</SCRIPT>

显然没有尝试修复父级,只是用一点 javascript 将“zoom:50%”样式添加到子级的正文中。

也许可以设置“HTML”元素的样式,但没有尝试。

【讨论】:

不要这样做。来自developer.mozilla.org/en-US/docs/Web/CSS/zoom:“此功能是非标准的,不在标准轨道上。不要在面向 Web 的生产站点上使用它:它不适用于每个用户。实现和行为之间也可能存在很大的不兼容将来可能会改变。” +1 这(修改 iframe 的内容,而不是 iframe 本身)似乎是一个更好的主意。我需要一种方法来缩小页面并将其显示为该页面的预览,而这种方法解决了这个问题。 @akinuri 是的,这正是我使用它的目的。我经历了许多解决方案,但这似乎是最简单的。我只是遍历 iframe 并将它们全部缩小以获得一页缩略图。无需更改子页面。【参考方案4】:

如果您将 CSS 更改为:Kip's solution 应该可以在 Opera 和 Safari 上运行:

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

【讨论】:

@JonathanM - cf meta.stackexchange.com/questions/75043/…,我在这里做错了吗? @lxs,一点也不。我喜欢它,并给了它+1。干得好。 我注意到在 chrome 上我同时应用了缩放和 webkit 转换,这导致比例被应用了两次。 正如@dennisjtaylor 所说,chrome 似乎应用了两次比例 - 如此处所示jsfiddle.net/zjTBq/embedded/result 由于所有现代浏览器都支持转换很长一段时间,我会考虑使用无前缀版本(至少作为替代)。【参考方案5】:

如果您希望 iframe 及其内容在窗口调整大小时缩放,您可以将以下内容设置为窗口的调整大小事件以及 iframe 的 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 及其内容缩放到 wrap div 的 100% 宽度(或您想要的任何百分比)。作为额外的好处,您不必将框架的 css 设置为硬编码值,因为它们都是动态设置的,您只需要担心包装 div 的显示方式。

我已经对此进行了测试,它适用于 chrome、IE11 和 firefox。

【讨论】:

【参考方案6】:

在为此苦苦挣扎了几个小时后,试图让它在 IE8、9 和 10 中工作,这对我有用。

截至 2014 年 1 月 7 日,这种精简的 CSS 可在 FF 26、Chrome 32、Opera 18 和 IE9 -11 中使用:

.wrap

    width: 320px;
    height: 192px;
    padding: 0;
    overflow: hidden;


.frame

    width: 1280px;
    height: 786px;
    border: 0;

    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);

    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;

对于 IE8,设置宽度/高度以匹配 iframe,并将 -ms-zoom 添加到 .wrap 容器 div:

.wrap

    width: 1280px; /* same size as frame */
    height: 768px;
    -ms-zoom: 0.25; /* for IE 8 ONLY */

只需使用您最喜欢的浏览器嗅探方法来有条件地包含适当的 CSS,请参阅 Is there a way to do browser specific conditional CSS inside a *.css file? 了解一些想法。

IE7 是一个失败的原因,因为 -ms-zoom 直到 IE8 才存在。

这是我测试的实际 HTML:

<div class="wrap">
   <iframe class="frame" src="http://time.is"></iframe>
</div>
<div class="wrap">
    <iframe class="frame" src="http://apple.com"></iframe>
</div>

http://jsfiddle.net/esassaman/PnWFY/

【讨论】:

【参考方案7】:

这是我在宽度为 890 像素的页面上的解决方案

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


【讨论】:

【参考方案8】:

只要#wrap 中的数字是#frame 乘以比例因子,#wrap #frame 解决方案就可以正常工作。它仅显示缩小框架的那部分。您可以在这里看到它缩小网站并将其放入类似 pinterest 的形式(使用 woodmark jQuery 插件):

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

【讨论】:

【参考方案9】:

您不需要使用额外的标签来包装 iframe。只需确保将 iframe 的宽度和高度增加与缩小 iframe 相同的量即可。

例如将 iframe 内容缩放到 80%:

#frame  /* Example size! */
    height: 400px; /* original height */
    width: 100%; /* original width */

#frame 
    height: 500px; /* new height (400 * (1/0.8) ) */
    width: 125%; /* new width (100 * (1/0.8) )*/

    transform: scale(0.8); 
    transform-origin: 0 0;

基本上,要获得相同大小的 iframe,您需要缩放尺寸。

【讨论】:

【参考方案10】:

我想我会使用上面给出的大部分内容来分享我的想法。我没有检查过 Chrome,但据我所知,它适用于 IE、Firefox 和 Safari。

此示例中的具体偏移量和缩放系数适用于在 iframe 中为 Facebook 选项卡(810 像素宽度)缩小和居中两个网站。

使用的两个站点是一个 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>

【讨论】:

【参考方案11】:

对于那些在 IE 中无法使用此功能的人,按照下面的建议使用 -ms-zoom 并在 #wrap div 上使用缩放功能会很有帮助,而不是 iframe id。根据我的经验,zoom 函数试图缩放#frame 的 iframe div,它会缩放 iframe 大小而不是其中的内容(这就是你想要的)。

看起来像这样。在 IE8、Chrome 和 FF 上为我工作。

#wrap 
  overflow: hidden;
  position: relative;
  width:800px;
  height:850px;
  -ms-zoom: 0.75;

【讨论】:

在 IE8 标准模式下使用 zoom,在 quirks 模式下使用 -ms-zoom【参考方案12】:

跟进lxs's answer:我注意到一个问题,即同时拥有zoom--webkit-transform 标签似乎会通过双重缩放效果混淆Chrome(版本15.0.874.15)。我能够通过将zoom 替换为-ms-zoom(仅针对IE)来解决这个问题,让Chrome 只使用--webkit-transform 标签,这就解决了问题。

【讨论】:

【参考方案13】:

我找到了一个适用于 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,你就会明白我的意思了。)

我从this question 找到了其中一些。

【讨论】:

【参考方案14】:

我认为您可以通过使用 javascript 计算所需的高度和宽度(通过 document.body.clientWidth 等)然后将 iframe 注入到您的 HTML 中,如下所示:

var element = document.getElementById("myid"); element.innerHTML += "";

我没有在 IE6 中对此进行测试,但它似乎适用于好的 :)

【讨论】:

请原谅我的无知,但这不会使 iframe 占源页面的 80%,而不是缩小源页面本身吗?【参考方案15】:

如果您的 html 是用 css 设置样式的,您可能可以链接不同大小的不同样式表。

【讨论】:

【参考方案16】:

htmlzoom:0.4; ?-)

【讨论】:

80% 为 0.8,但这是专有的微软主义,因此可能不适合。它也只有在加载到框架中的文档可以编辑时才有效,这是不太可能的。【参考方案17】:

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

【讨论】:

【参考方案18】:

我不认为 HTML 有这样的功能。我能想象的唯一能解决问题的就是做一些服务器端处理。也许您可以获取要服务的网页的图像快照,在服务器上对其进行缩放并将其提供给客户端。然而,这将是一个非交互式页面。 (也许图像地图可以有链接,但仍然。)

另一个想法是拥有一个可以改变 HTML 的服务器端组件。有点像 Firefox 2.0 的缩放功能。这当然不是完美的缩放,但总比没有好。

除此之外,我没有想法。

【讨论】:

以上是关于如何缩放 iframe 的内容?的主要内容,如果未能解决你的问题,请参考以下文章

如何将 iframe 高度和宽度设置为 100%

<iframe>内的内容可以控制吗?

Chrome 66 - 在切换缩放之前,Flash 不会显示在 iframe 中

FancyBox iframe 高度问题

javascript 如何获取iframe里面的内容?

iframe获得内容,如何获得页面的中间部分?