如何在我的网站页面中扩展iframe的内容（在我的示例中，它是一个HTML页面，而不是弹出窗口）？
例如，我想以if原始大小的80％显示iframe中显示的内容。
答案 0 :(得分：207)
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以防止滚动条。
答案 1 :(得分：53)
我找到了一个适用于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找到了部分内容。
答案 2 :(得分：29)
经过几个小时的努力，试图让它在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是一个失败的原因，因为在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>
答案 3 :(得分：9)
对lxs's answer的跟进：我发现同时同时拥有zoom和--webkit-transform标记的问题似乎会混淆Chrome（版本15.0.874.15）缩放一种效果。我能够通过将zoom替换为-ms-zoom（仅针对IE）来解决此问题，让Chrome只使用--webkit-transform标记，这样就可以解决问题。< / p>
答案 4 :(得分：9)
您无需使用其他标记包装iframe。只需确保将iframe的宽度和高度增加与向下缩放iframe相同的数量。
e.g。将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，您需要缩放尺寸。
答案 5 :(得分：7)
以为我会分享我的想法，使用上面给出的大部分内容。我还没有检查Chrome，但据我所知，它可以在IE，Firefox和Safari中使用。
此示例中的细节偏移和缩放系数适用于缩小和居中两个网站的iframes for Facebook标签（810px宽度）。
使用的两个站点是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>
答案 6 :(得分：6)
我刚刚测试过，对我来说，没有其他解决方案有效。 我只是尝试了这个，它在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）。
答案 7 :(得分：6)
html {zoom：0.4;}？ - ）
答案 8 :(得分：5)
如果您希望在窗口调整大小时缩放iframe及其内容，可以将以下内容设置为窗口的resize事件以及iframes 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设置为硬编码值，因为它们都将动态设置，您只需要担心如何显示包装div。
我测试了这个，它适用于chrome，IE11和firefox。
答案 9 :(得分：4)
我认为您可以通过使用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中对此进行测试，但它似乎适用于好的：）
答案 10 :(得分：3)
对于那些无法在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;
}
答案 11 :(得分：3)
这是我在宽度为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;
}
答案 12 :(得分：2)
#wrap #frame解决方案工作正常，只要#wrap中的数字是#frame乘以比例因子。它仅显示缩小帧的那部分。你可以在这里看到它缩小网站并将它放入类似形式的pinterest（使用woodmark jQuery插件）：
答案 13 :(得分：2)
所以可能不是最好的解决方案，但似乎工作正常。
<IFRAME ID=myframe SRC=.... ></IFRAME>
<SCRIPT>
window.onload = function(){document.getElementById('myframe').contentWindow.document.body.style = 'zoom:50%;';};
</SCRIPT>
显然没有尝试修复父级，只需使用一些javascript将“zoom：50％”样式添加到孩子的身体。
也许可以设置“HTML”元素的样式，但没试过。
答案 14 :(得分：1)
如果你的html是用css设计的，你可以链接不同尺寸的不同样式表。
答案 15 :(得分：0)
我认为HTML没有这样的功能。我唯一能想到的就是做一些服务器端处理。也许您可以获得要提供的网页的图像快照，在服务器上进行缩放并将其提供给客户端。然而，这将是一个非交互式页面。 （也许图像映射可以有链接，但仍然。）
另一个想法是拥有一个可以改变HTML的服务器端组件。像firefox 2.0缩放功能一样。这当然不是完美的缩放，但总比没有好。
除此之外，我没有想法。
答案 16 :(得分：0)
如上所述，我怀疑你能做到这一点
也许您可以通过设置样式font-size: 80%;来至少缩放文本本身
未经测试，不确定是否有效，并且不会调整框或图像的大小。