如何在网站页面中缩放iframe的内容（在我的示例中是HTML页面，而不是弹出窗口）？
例如，我想以80％的原始大小显示iframe中显示的内容。
Answers:
如果将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上隐藏以防止滚动条。
我找到了一个可以在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>注意：我必须将wrap元素用于Firefox。出于某种原因，在Firefox中，当将对象缩小75％时，出于布局原因，它仍然使用图像的原始大小。（尝试从上面的示例代码中删除div，您将明白我的意思。）
我从这个问题中发现了一些。
经过数小时的努力后，尝试使其在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，请参阅是否可以在* .css文件中进行特定于浏览器的条件CSS？一些想法。
IE7是一个丢失的原因，因为直到IE8才存在-ms-zoom。
这是我测试过的实际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>我刚刚进行了测试，对我来说，其他解决方案均无效。我只是尝试了一下，就象我期望的那样，它在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;
}这会将所有内容缩放30％。当然，宽度/高度百分比需要相应地调整（1 / scale_factor）。
overflow: hidden;到.wrap元素。使用iframe { width: 200%; height: 200%; transform: scale(0.5); }iframe时开始溢出。
您无需使用其他代码包装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，您需要缩放尺寸。
以为我会分享我的想法，并使用上面给出的很多内容。据我所知，我尚未检查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>如果您希望在调整窗口大小时缩放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及其内容缩放到自动换行div的100％宽度（或所需的百分比）。另外，您不必将框架的css设置为硬编码值，因为它们都是动态设置的，您只需要担心想如何显示wrap div。
我已经测试过了，它可以在chrome，IE11和firefox上使用。
我认为您可以通过以下方法来实现此目的：通过使用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中无法正常使用的人，-ms-zoom按照以下建议使用并在#wrapdiv 上使用缩放功能（而不是iframeid）会很有帮助。以我的经验，该zoom函数尝试缩放iframe的#frame，它将缩放iframe的大小，而不是其中的内容（这就是您要的）。
看起来像这样。适用于IE8，Chrome和FF。
#wrap {
overflow: hidden;
position: relative;
width:800px;
height:850px;
-ms-zoom: 0.75;
}zoom在IE8标准模式，使用-ms-zoom怪癖模式。
这是我在宽度为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;
}只要#wrap中的数字是#frame乘以比例因子，＃wrap #frame解决方案就可以正常工作。它仅显示缩小帧的那部分。您可以在此处看到它缩小网站规模并将其放入pinterest之类的形式（带有木印jQuery插件）：
所以可能不是最好的解决方案，但似乎可以。
<IFRAME ID=myframe SRC=.... ></IFRAME>
<SCRIPT>
window.onload = function(){document.getElementById('myframe').contentWindow.document.body.style = 'zoom:50%;';};
</SCRIPT>显然，不尝试修复父对象，只是使用一些JavaScript将“ zoom：50％”样式添加到孩子的身体上。
也许可以设置“ HTML”元素的样式，但是没有尝试过。
我不认为HTML具有这种功能。我唯一能想到的就是完成一些服务器端处理。也许您可以获得要提供的网页的图像快照，将其在服务器上缩放并提供给客户端。但是，这将是一个非交互式页面。（也许图像映射可能具有链接，但仍然存在。）
另一个想法是拥有一个可以更改HTML的服务器端组件。像firefox 2.0缩放功能一样。这当然不是完美的缩放，但总比没有好。
除此之外，我没有主意。