我如何能缩放一个iframe的内容(在我的例子中,它是一个HTML页面,而不是一个弹出窗口)在我的网站的页面?
例如,我想以原始大小的80%显示iframe中的内容。
我如何能缩放一个iframe的内容(在我的例子中,它是一个HTML页面,而不是一个弹出窗口)在我的网站的页面?
例如,我想以原始大小的80%显示iframe中的内容。
当前回答
Kip的解决方案应该在Opera和Safari上工作,如果你改变CSS为:
<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以防止滚动条。
其他回答
如果您希望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上运行。
这些解决方案不适合我(模糊)与Flexbox和iFrame在100%,但如果iFrame使用rem em或百分比单位,那么有一个解决方案看起来很棒:
window.onload = function(){
let ifElem = document.getElementById("iframe-id");
ifElem.contentWindow.document.documentElement.style.fontSize="80%";
}
如前所述,我怀疑你做不到。 也许你可以至少缩放文本本身,通过设置一个样式font-size: 80%;。 未经测试,不确定它的工作,不会调整框或图像的大小。
我不认为HTML有这样的功能。我唯一能想到的是做一些服务器端处理。也许你可以获得你想要服务的网页的图像快照,在服务器上缩放它并将其提供给客户端。然而,这将是一个非交互式页面。(也许imagemap可以有链接,但仍然如此。)
另一个想法是有一个服务器端组件来修改HTML。有点像火狐2.0的缩放功能。这当然不是完美的变焦,但总比没有好。
除此之外,我没有别的办法了。
我刚测试过,对我来说,其他的解决方案都不奏效。 我只是简单地尝试了一下,它在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;
}
这将所有内容放大23.08%,相当于原始版本比嵌入式版本大30%。(宽度/高度百分比当然需要相应调整(1/scale_factor))。