如何扩展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> 

http://jsfiddle.net/esassaman/PnWFY/

跟踪到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:

http://www.genautica.com/sandbox/woodmark-index.html

如果你的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个图像(宽度),并且确切地说,发生在每个框架宽度的情况下。

为什么它只以百分比工作?