Html 如何在不使用框架集的情况下仅缩放 IFRAME 内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7203064/
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 to zoom IFRAME content only without using a frame set?
提问by Baskaran
I need to zoom frame content only. Here in my web page I used zoom: 0.75; height: 520px; width: 800px;. If I increase the zoom value it means that the frame size will be increased.
我只需要缩放框架内容。在我的网页中，我使用了zoom: 0.75; height: 520px; width: 800px;. 如果我增加缩放值，则意味着帧大小将增加。
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<STYLE>
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</STYLE>
</HEAD>
<BODY>
<IFRAME id="frame" src="http://www.google.com"></IFRAME>
</BODY>
</HTML>
In the above sample HTML page I want to zoom the content of the IFRAME without changing the size of that IFRAME.
在上面的示例 HTML 页面中，我想在不更改 IFRAME 大小的情况下缩放 IFRAME 的内容。
回答by Ali Usman
I have used a script in my facebook and it's working in IE and Firefox
我在我的 facebook 中使用了一个脚本，它可以在 IE 和 Firefox 中运行
<style type="text/css">
#iframe {
zoom: 0.15;
-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>
<iframe src="https://www.wikipedia.org/" height="700" width="550">Wikipedia Encyclopedia</iframe>
回答by Luke Hankins
Not sure this works with linked documents, but with locally hosted content the following works:
不确定这是否适用于链接的文档，但对于本地托管的内容，以下适用：
<IFRAME id="frame" src="local.pdf#zoom=100"></IFRAME>
回答by Dan
For this you might need to use javascript.
为此，您可能需要使用 javascript。
There is a zoom plugin for jQuery here: http://css-tricks.com/examples/AnythingZoomer/
这里有一个 jQuery 缩放插件：http: //css-tricks.com/examples/AnythingZoomer/
You could change the iframes src to a local web page (eg. frame.htm), place a div in the frame and use the jquery load() function to load the content into the frame:
您可以将 iframes src 更改为本地网页（例如 frame.htm），在框架中放置一个 div 并使用 jquery load() 函数将内容加载到框架中：
<script type="text/javascript">
$(document).ready(function() {
$("#loadGoogle").load("pageToLoad.html", function(){
//loaded
});
})
</script>
<div id="loadGoogle" style="width: 100%; height: 100%;"></div>
Then use the jquery zoom plugin inside the frame to zoom the content.
然后使用框架内的jquery缩放插件来缩放内容。
<script type="text/javascript">
$("#loadGoogle").anythingZoomer({
expansionSize: 30,
speedMultiplier: 1.4
});
</script>
回答by Edwin Dover
For an updated answer this is a great guide. Cheers
对于更新的答案，这是一个很好的指南。干杯
http://www.collaboration133.com/how-to-scale-iframe-content-in-ie-chrome-firefox-and-safari/2717/
http://www.collaboration133.com/how-to-scale-iframe-content-in-ie-chrome-firefox-and-safari/2717/
