html - 如何缩放 iframe 的内容？

Question

如何在我的网站页面中缩放 iframe 的内容（在我的示例中是 HTML 页面，而不是弹出窗口）？

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

Answer 1

如果您将 CSS 更改为：Kip 的解决方案应该可以在 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 以防止滚动条。

Answer 2

我找到了一个适用于 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>

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

我从这个问题中找到了一些。

Answer 3

经过几个小时的努力，试图让它在 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/

Answer 4

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

Answer 5

您不需要使用附加标签包装 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，您需要缩放尺寸。

Answer 6

对lxs 的回答的跟进：我注意到一个问题，即同时拥有zoom和--webkit-transform标签似乎会通过双重缩放效果混淆 Chrome（版本 15.0.874.15）。zoom我能够通过替换为-ms-zoom（仅针对 IE）来解决这个问题，让 Chrome 只使用--webkit-transform标签，这样就解决了问题。

Answer 7

以为我会使用上面给出的大部分内容来分享我的想法。我没有检查过 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>

Answer 8

html{zoom:0.4;} ?-)

Answer 9

如果您希望 iframe 及其内容在窗口调整大小时缩放，您可以将以下内容设置为窗口的 resize 事件以及 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。

Answer 10

我认为您可以通过使用 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 中对此进行测试，但它似乎适用于好的 :)

Answer 11

For those of you having trouble getting this to work in IE, it is helpful to use -ms-zoom as suggested below and use the zoom function on the #wrap div, not the iframe id. In my experience, with the zoom function trying to scale the iframe div of #frame, it would scale the iframe size and not the content within it (which is what you're going for).

Looks like this. Works for me on IE8, Chrome and FF.

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

Answer 12

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

}

Answer 13

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

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

Answer 14

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

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

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

显然不是试图修复父母，只是用一点javascript将“zoom：50％”样式添加到孩子的身体。

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

Answer 15

如果您的 html 使用 css 进行样式设置，您可能可以链接不同大小的不同样式表。

Answer 16

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

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

除此之外，我没有想法。

Answer 17

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

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

Answer 18

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