我如何能缩放一个iframe的内容(在我的例子中,它是一个HTML页面,而不是一个弹出窗口)在我的网站的页面?
例如,我想以原始大小的80%显示iframe中的内容。
我如何能缩放一个iframe的内容(在我的例子中,它是一个HTML页面,而不是一个弹出窗口)在我的网站的页面?
例如,我想以原始大小的80%显示iframe中的内容。
当前回答
对于那些在IE中遇到困难的人,可以使用下面建议的-ms-zoom,并在#wrap div上使用缩放功能,而不是iframe id。根据我的经验,使用缩放函数尝试缩放#frame的iframe div,它将缩放iframe的大小,而不是其中的内容(这是你想要的)。
就像这样。适用于我的IE8, Chrome和FF。
#wrap {
overflow: hidden;
position: relative;
width:800px;
height:850px;
-ms-zoom: 0.75;
}
其他回答
如果你的html是用css样式的,你可能可以链接不同大小的不同样式表。
用CSS:
html{
zoom:0.4;
}
?-)
如果您希望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设置为硬编码值,因为它们都是动态设置的,你只需要担心你想要如何显示wrap div。
我已经测试过了,它可以在chrome, IE11和firefox上运行。
在花了几个小时试图让它在IE8、9和10中工作之后,下面是对我有效的方法。
这个精简的CSS工作在FF 26, Chrome 32, Opera 18,和IE9 -11 2014年1月7日:
.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,并在.wrap container div中添加-ms-zoom:
.wrap
{
width: 1280px; /* same size as frame */
height: 768px;
-ms-zoom: 0.25; /* for IE 8 ONLY */
}
只需使用您最喜欢的浏览器嗅探方法,有条件地包含适当的CSS,参见是否有一种方法在*.css文件中执行特定于浏览器的条件CSS ?为了一些想法。
IE7是一个失败的原因,因为-ms-zoom直到IE8才出现。
下面是我测试的实际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/
如前所述,我怀疑你做不到。 也许你可以至少缩放文本本身,通过设置一个样式font-size: 80%;。 未经测试,不确定它的工作,不会调整框或图像的大小。