如何扩展iframe的内容？
我如何在我的网站的页面中扩展iframe的内容（在我的例子中是一个HTML页面，而不是一个popup窗口）？
例如，我想以原始大小的80％显示出现在iframe中的内容。
如果您将CSS更改为： Kip的解决scheme应该可以在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> 您可能还想指定overflow：隐藏在#frame以防止滚动条。
我发现一个解决scheme，在IE和Firefox（至less在当前版本）工作。 在Safari / Chrome上，iframe的大小调整为原始大小的75％，但iframe中的内容根本没有缩放。 在Opera中，这似乎不起作用。 这感觉有点深奥，所以如果有更好的办法做到这一点，我会欢迎你的build议。
<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，你会明白我的意思。）
我从这个问题中发现了一些。
经过几个小时的努力，试图让它在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是一个失败的原因，因为-ms-zoom直到IE8才存在。
这是我testing的实际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>
跟踪到lxs的回答 ：我注意到一个问题，同时zoom和 – --webkit-transform标记似乎混淆了铬（版本15.0.874.15）通过执行双缩放类效果。 我能够通过用-ms-zoom （仅针对IE）replacezoom来解决这个问题，让Chrome只使用--webkit-transform标签，并且清理了一些东西。
你不需要用一个额外的标签来包装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上运行。
这个例子中的偏移量和缩放比例因子适用于在Facebook标签（810px宽度）的iframe中缩小和居中两个网站。
这两个网站是一个WordPress站点和一个宁networking。 我不是很好的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>
html {zoom：0.4;}？ – ）
我想你可以通过计算你想要的高度和宽度（通过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中testing，但它似乎与良好的工作:)
如果您希望在调整窗口大小时调整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及其内容的缩放到100％的换行div（或任何你想要的百分比）。 作为一个额外的好处，你不必将帧的CSS设置为硬编码值，因为它们都将被dynamic设置，你只需要担心你想如何显示包装div。
我已经testing过这个，它可以在Chrome，IE11和Firefox上使用。
对于那些在IE中无法正常工作的用户，使用下面build议的-ms-zoom是有帮助的，并且在#wrap div上使用缩放function，而不是iframe ID。 根据我的经验，使用zoomfunction试图缩放#frame的iframe div，它会缩放iframe的大小，而不是缩放iframe中的内容（这就是你要做的）。
看起来像这样 适用于IE8，Chrome和FF。
#wrap { overflow: hidden; position: relative; width:800px; height:850px; -ms-zoom: 0.75; }
这是我在890px宽的页面上的解决scheme
#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解决scheme工作正常，只要#wrap中的数字是#frame乘以比例因子。 它只显示缩小帧的那部分。 你可以在这里看到它缩小了网站，并把它放在forms（与woodmark的jQuery插件）forms：
如果你的html使用css样式，你可能链接不同的样式表为不同的大小。
所以可能不是最好的解决scheme，但似乎工作正常。
<IFRAME ID=myframe SRC=.... ></IFRAME> <SCRIPT> window.onload = function(){document.getElementById('myframe').contentWindow.document.body.style = 'zoom:50%;';}; </SCRIPT>
显然，不是试图修复父母，只是用一点点的javascript给孩子的身体添加“zoom：50％”风格。
也许可以设置“HTML”元素的样式，但没有尝试。
我不认为HTML有这样的function。 我能想象的唯一办法就是做一些服务器端的处理。 也许你可以得到你想要服务的网页的图片快照，在服务器上扩展它并将其提供给客户端。 这将是一个非交互式页面。 （也许一个图像映射可能有链接，但仍然）。
另一个想法是有一个服务器端组件可以改变HTML。 SOT的像Firefox 2.0的缩放function。 这当然不是完美的缩放，但总比没有好。
除此之外，我没有想法。
如上所述，我怀疑你能做到这一点。
也许你可以至less缩放文本本身，通过设置一个样式font-size: 80%; 。
未经testing，不确定是否有效，并且不会调整框或图像的大小。
我注意到，当我在目标页面中定义容器的宽度（父DIV）时，会自动缩放，而不是以像素为单位，而是以百分比forms显示。 它自动发生。
在我的例子中，我定义了exmpl。 div的宽度为480px，其中iframe将被设置。 2.我为iframe设置了100％的宽度。 3.我在目标页面中为父div设置了250％的宽度（5张图片×50％的屏幕宽度）。
我的意图是在框架中显示2个图像（宽度），并且确切地说，发生在每个框架宽度的情况下。
为什么它只以百分比工作？
