Html 如何缩放 iframe 的内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/166160/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I scale the content of an iframe?
提问by John Griffiths
How can I scale the content of an iframe (in my example it is an HTML page, and is not a popup) in a page of my web site?
如何在我的网站页面中缩放 iframe 的内容（在我的示例中它是一个 HTML 页面，而不是一个弹出窗口）？
For example, I want to display the content that appears in the iframe at 80% of the original size.
例如，我想以原始大小的 80% 显示 iframe 中出现的内容。
回答by lxs
Kip's solutionshould work on Opera and Safari if you change the CSS to:
基普的解决方案应该在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>
You might also want to specify overflow: hidden on #frame to prevent scrollbars.
您可能还想在 #frame 上指定 overflow: hidden 以防止滚动条。
回答by Kip
I found a solution that works in IE and Firefox (at least on the current versions). On Safari/Chrome, the iframe is resized to 75% of its original size, but the content within the iframe is not scaled at all. In Opera, this doesn't seem to work. This feels a bit esoteric, so if there is a better way to do it I'd welcome suggestions.
我找到了一个适用于 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>
Note: I had to use the wrapelement for Firefox. For some reason, in Firefox when you scale the object down by 75%, it still uses the original size of the image for layout reasons. (Try removing the div from the sample code above and you'll see what I mean.)
注意：我必须在wrapFirefox 中使用该元素。出于某种原因，在 Firefox 中，当您将对象缩小 75% 时，出于布局原因，它仍然使用图像的原始大小。（尝试从上面的示例代码中删除 div，您就会明白我的意思。）
I found some of this from this question.
我从这个问题中找到了一些。
回答by Eric Sassaman
After struggling with this for hours trying to get it to work in IE8, 9, and 10 here's what worked for me.
在为此苦苦挣扎了几个小时试图让它在 IE8、9 和 10 中工作后，这对我有用。
This stripped-down CSS works in FF 26, Chrome 32, Opera 18, and IE9 -11 as of 1/7/2014:
截至 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;
}
For IE8, set the width/height to match the iframe, and add -ms-zoom to the .wrap container div:
对于 IE8，设置宽度/高度以匹配 iframe，并将 -ms-zoom 添加到 .wrap 容器 div：
.wrap
{
width: 1280px; /* same size as frame */
height: 768px;
-ms-zoom: 0.25; /* for IE 8 ONLY */
}
Just use your favorite method for browser sniffing to conditionally include the appropriate CSS, see Is there a way to do browser specific conditional CSS inside a *.css file?for some ideas.
只需使用您最喜欢的浏览器嗅探方法来有条件地包含适当的 CSS，请参阅有没有办法在 *.css 文件中执行浏览器特定的条件 CSS？对于一些想法。
IE7 was a lost cause since -ms-zoom did not exist until IE8.
IE7 是一个失败的原因，因为 -ms-zoom 直到 IE8 才存在。
Here's the actual HTML I tested with:
这是我测试的实际 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>
回答by MrP01
I just tested and for me, none of the other solutions worked. I simply tried this and it worked perfectly on Firefox and Chrome, just as I had expected:
我刚刚测试过，对我来说，其他解决方案都不起作用。我只是尝试了这个，它在 Firefox 和 Chrome 上运行得很好，正如我所期望的：
<div class='wrap'>
<iframe ...></iframe>
</div>
and the css:
和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;
}
This scales all the content by 30%. The width/height percentages of course need to be adjusted accordingly (1/scale_factor).
这会将所有内容按比例缩放 30%。宽度/高度百分比当然需要相应调整（1/scale_factor）。
回答by r3cgm
Followup to lxs's answer: I noticed a problem where having both the zoomand --webkit-transformtags at the same time seems to confound Chrome (version 15.0.874.15) by doing a double-zoom sort of effect. I was able to work around the issue by replacing zoomwith -ms-zoom(targeted only at IE), leaving Chrome to make use of just the --webkit-transformtag, and that cleared things up.
对lxs 的回答的跟进：我注意到一个问题，即同时拥有zoom和--webkit-transform标签似乎通过双重缩放效果混淆了 Chrome（版本 15.0.874.15）。我能够通过替换zoom为-ms-zoom（仅针对 IE）来解决这个问题，让 Chrome 只使用--webkit-transform标签，这样就解决了问题。
回答by Matthew Wilcoxson
You don't need to wrap the iframe with an additional tag. Just make sure you increase the width and height of the iframe by the same amount you scale down the iframe.
您不需要用额外的标签包装 iframe。只需确保将 iframe 的宽度和高度增加与缩小 iframe 相同的量。
e.g. to scale the iframe content to 80% :
例如将 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;
}
Basically, to get the same size iframe you need to scale the dimensions.
基本上，要获得相同大小的 iframe，您需要缩放尺寸。
回答by Jon Fergus
Thought I'd share what I came up with, using much of what was given above. I haven't checked Chrome, but it works in IE, Firefox and Safari, so far as I can tell.
我想我会分享我的想法，使用上面给出的大部分内容。我还没有检查过 Chrome，但据我所知，它可以在 IE、Firefox 和 Safari 中运行。
The specifics offsets and zoom factor in this example worked for shrinking and centering two websites in iframes for Facebook tabs (810px width).
本示例中的具体偏移量和缩放系数用于在 iframe 中缩小和居中 Facebook 选项卡的两个网站（宽度为 810 像素）。
The two sites used were a wordpress site and a ning network. I'm not very good with html, so this could probably have been done better, but the result seems good.
使用的两个站点是 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>
回答by roenving
html{zoom:0.4;} ?-)
html{缩放：0.4;} ?-)
回答by user3298597
If you want the iframe and its contents to scale when the window resizes, you can set the following to the window's resize event as well as the iframes onload event.
如果您希望 iframe 及其内容在窗口调整大小时缩放，您可以将以下内容设置为窗口的调整大小事件以及 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';
};
This will make the iframe and its content scale to 100% width of the wrap div (or whatever percent you want). As an added bonus, you don't have to set the css of the frame to hard coded values since they'll all be set dynamically, you'll just need to worry about how you want the wrap div to display.
这将使 iframe 及其内容缩放到 wrap div 的 100% 宽度（或您想要的任何百分比）。作为额外的好处，您不必将框架的 css 设置为硬编码值，因为它们都是动态设置的，您只需要担心如何显示 wrap div。
I've tested this and it works on chrome, IE11, and firefox.
我已经测试过了，它适用于 chrome、IE11 和 firefox。
回答by Eric Wendelin
I think you can do this by calculating the height and width you want with javascript (via document.body.clientWidth etc.) and then injecting the iframe into your HTML like this:
我认为您可以通过使用 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 + "'/>";
I didn't test this in IE6 but it seems to work with the good ones :)
我没有在 IE6 中测试过这个，但它似乎适用于好的 :)
