如何缩放iframe的内容?

我如何能缩放一个iframe的内容(在我的例子中，它是一个HTML页面，而不是一个弹出窗口)在我的网站的页面?

例如，我想以原始大小的80%显示iframe中的内容。

465048 次浏览
小开

我不认为HTML有这样的功能。我唯一能想到的是做一些服务器端处理。也许你可以获得你想要服务的网页的图像快照，在服务器上缩放它并将其提供给客户端。然而，这将是一个非交互式页面。(也许imagemap可以有链接，但仍然如此。)

另一个想法是有一个服务器端组件来修改HTML。有点像火狐2.0的缩放功能。这当然不是完美的变焦，但总比没有好。

除此之外，我没有别的办法了。

小开
如前所述，我怀疑你能做得到 也许你可以至少缩放文本本身，通过设置样式font-size: 80%;.
未经测试，不确定它是否有效，并且不会调整框或图像的大小
小开

用CSS:

html{
zoom:0.4;
}

?)

小开

如果你的html是用css样式的，你可能可以链接不同大小的不同样式表。

小开

我认为你可以通过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中测试这个功能，但它似乎与好版本一起工作:)

小开

我找到了一个可以在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，你就会明白我的意思了。)

我从这个问题中找到了一些。

小开

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以防止滚动条。

小开

lx的回答的后续:我注意到一个问题，同时拥有zoom和--webkit-transform标签似乎混淆了Chrome(版本15.0.874.15)通过做一个双重缩放的效果。我能够通过将zoom替换为-ms-zoom(仅针对IE)来解决这个问题，让Chrome只使用--webkit-transform标记，这就解决了问题。

小开

对于那些在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;
}
小开

我想分享一下我的想法，使用上面给出的大部分内容。我还没有检查Chrome浏览器，但据我所知，它在IE、Firefox和Safari浏览器中都可以运行。

这个例子中的具体偏移量和缩放因子适用于Facebook标签的iframe中缩小和居中两个网站(宽度为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>
小开

您不需要用额外的标记来包装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，你需要缩放尺寸。

小开

#wrap #frame解决方案很好，只要#wrap中的数字是#frame乘以比例因子。它只显示了缩小框架的那一部分。你可以在这里看到它缩小网站，并把它变成pinterest一样的形式(与woodmark jQuery插件):

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

小开

这是我在一个宽度为890px的页面上的解决方案

#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;


}
小开

在花了几个小时试图让它在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/

小开

如果您希望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上运行。

小开

所以可能不是最好的解决方案，但似乎还可以。

<IFRAME ID=myframe SRC=.... ></IFRAME>


<SCRIPT>
window.onload = function(){document.getElementById('myframe').contentWindow.document.body.style = 'zoom:50%;';};
</SCRIPT>

显然不是试图修复父元素，只是添加了“缩放:50%”样式到子元素的主体，并使用了一点javascript。

也许可以设置“HTML”元素的样式，但没有尝试。

小开
我刚刚测试过，对我来说，其他的解决方案都不奏效。 我只是简单地尝试了一下，它在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))。

小开

这些解决方案不适合我(模糊)与Flexbox和iFrame在100%，但如果iFrame使用rem em或百分比单位，那么有一个解决方案看起来很棒:

  window.onload = function(){
let ifElem = document.getElementById("iframe-id");
ifElem.contentWindow.document.documentElement.style.fontSize="80%";
}

提交答案