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

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

解决方案

我不认为HTML具有这种功能。我能想象的唯一的办法就是完成一些服务器端处理。也许我们可以获得要提供的网页的图像快照，将其在服务器上缩放并提供给客户端。但是，这将是一个非交互式页面。 (也许图像映射可能具有链接，但仍然可以。)

另一个想法是拥有一个可以更改HTML的服务器端组件。类似于firefox 2.0缩放功能的SORT。这当然不是完美的缩放，但总比没有好。

除此之外，我没有主意。

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

html {zoom：0.4;}？-)

如果html使用CSS设置样式，则可以链接不同大小的不同样式表。

我认为我们可以通过以下方式来实现此目的：通过使用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中对此进行测试，但它似乎可以与优秀的产品一起使用:)

我找到了一种可在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，我们将明白我的意思。)

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

如果将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上隐藏以防止滚动条。