如何在不使用框架集的情况下仅缩放 IFRAME 内容？答案

【问题标题】：How to zoom IFRAME content only without using a frame set?如何在不使用框架集的情况下仅缩放 IFRAME 内容？
【发布时间】：2011-11-04 09:47:14
【问题描述】：

我只需要缩放框架内容。在我的网页中，我使用了zoom: 0.75; height: 520px; width: 800px;。如果我增加缩放值，则意味着帧大小将增加。

<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 <STYLE>

#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</STYLE>
 </HEAD>

 <BODY>

  <IFRAME id="frame" src="http://www.google.com"></IFRAME> 

  </BODY>

</HTML>

在上面的示例 HTML 页面中，我想在不改变 IFRAME 大小的情况下缩放 IFRAME 的内容。

【问题讨论】：

How can I scale the content of an iframe? 的可能重复项

标签： html css firefox iframe

【解决方案1】：

我在我的 facebook 中使用了一个脚本，它可以在 IE 和 Firefox 中运行

<style type="text/css">
#iframe {
    zoom: 0.15;
    -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>

<iframe src="https://www.wikipedia.org/"  height="700" width="550">Wikipedia Encyclopedia</iframe>

【讨论】：

这很好 - 但不要使用 zoom 和供应商特定属性之一。例如：如果您使用 Chrome，您的 iframe 会被缩放和转换 - 这会导致双重缩放。
这并不能完全回答问题，是吗？ OP 显然想要缩放 iframe 的 contents，而不是 iframe 本身。

【解决方案2】：

不确定这适用于链接文档，但对于本地托管的内容，以下适用：

<IFRAME id="frame" src="local.pdf#zoom=100"></IFRAME>

【讨论】：

【解决方案3】：

为此，您可能需要使用 javascript。

这里有一个 jQuery 的缩放插件：http://css-tricks.com/examples/AnythingZoomer/

您可以将 iframe src 更改为本地网页（例如 frame.htm），在框架中放置一个 div 并使用 jquery load() 函数将内容加载到框架中：

<script type="text/javascript">
     $(document).ready(function() {
          $("#loadGoogle").load("pageToLoad.html", function(){ 
             //loaded
          });
    })
</script>
<div id="loadGoogle" style="width: 100%; height: 100%;"></div>

然后使用框架内的jquery缩放插件来缩放内容。

<script type="text/javascript">
    $("#loadGoogle").anythingZoomer({

       expansionSize: 30,
       speedMultiplier: 1.4

    });
</script>

【讨论】：

问题是，你告诉 iframe 缩放，而不是 iframe 的内容。通过使用 CSS "#frame { zoom: 0.75..." 你不会得到想要的结果。

【解决方案4】：

对于更新的答案，这是一个很好的指南。干杯

http://www.collaboration133.com/how-to-scale-iframe-content-in-ie-chrome-firefox-and-safari/2717/

【讨论】：