Javascript 可以缩小 iframe 的内容吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2630308/
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
possible to shrink contents of iframe?
提问by Haroldo
Is there a way to shrink what's inside an iframe without adjusting css?
有没有办法在不调整 css 的情况下缩小 iframe 中的内容？
any magical 'zoom' parameter out there?!!!
那里有任何神奇的“缩放”参数？！！！
I have a 600px preview iframe i want to fit a 1000px site in without scrollbars...
我有一个 600 像素的预览 iframe，我想在没有滚动条的情况下容纳 1000 像素的网站...
采纳答案by Seidr
I'm afraid not. Your only option would be to use site-specific CSS modifiers to reduce font and element size.
恐怕不是。您唯一的选择是使用特定于站点的 CSS 修饰符来减少字体和元素大小。
回答by Justin Emlay
CSS3 can handle this. This bit of code should handle most all browsers or simply reduce it to fit your needs. No need to "adjust" any existing CSS:
CSS3 可以处理这个。这段代码应该可以处理大多数浏览器，或者只是减少它以满足您的需要。无需“调整”任何现有的 CSS：
iframe {
-moz-transform: scale(0.25, 0.25);
-webkit-transform: scale(0.25, 0.25);
-o-transform: scale(0.25, 0.25);
-ms-transform: scale(0.25, 0.25);
transform: scale(0.25, 0.25);
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
-o-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
}
Or if you want inline style for example just firefox:
或者，如果您想要内联样式，例如只需要 Firefox：
<style>
#IDNAME {
-moz-transform: scale(0.25, 0.25);
-moz-transform-origin: top left;
}
</style>
Then of course simply add the ID to your iframe:
然后当然只需将 ID 添加到您的 iframe：
<iframe id="IDNAME" src="http://www.whatever.com"></iframe>
回答by futtta
If you control the Iframe-content, you might find this little hack of mine useful: http://futtta.be/squeezeFrame/
如果您控制 Iframe 内容，您可能会发现我的这个小技巧很有用：http: //futtta.be/squeezeFrame/
It's a cross-browser standalone javascript thingy that tries to automatically adjust the size of the page it's called from to the available size of the Iframe using css zoom and moz-transform.
这是一个跨浏览器的独立 javascript 东西，它尝试使用 css zoom 和 moz-transform 自动将调用它的页面大小调整为 Iframe 的可用大小。
回答by Tristan Brotherton
You absolutely can do this, just fine.
你绝对可以做到这一点，很好。
Only caveat is you need to transform the iframe, and position it absolute:
唯一需要注意的是，您需要转换 iframe，并将其绝对定位：
iframe {
/* Set the width of the iframe the size you want to transform it FROM */
width: 1108px;
height: 710px;
/* apply the transform */
-webkit-transform:scale(0.25);
-moz-transform:scale(0.25);
-o-transform:scale(0.25);
transform:scale(0.25);
/* position it, as if it was the original size */
position: absolute;
left: -400px;
top: -200px;
}
To see an example look at: http://jsfiddle.net/8DVNa/
要查看示例，请查看：http: //jsfiddle.net/8DVNa/
回答by Elijah Rodriguez
I have several shopping sites that I have ported to my new site and
after fixing the view/vantagepoint of focus heres what I got...
the site fit nicely inside my iframeper page... the font size difference
is better than the focus issue...
I guess it was a good trade off
我有几个购物网站，我已将它们移植到我的新网站，在确定view/vantage焦点后，我得到了什么……该网站非常适合我的iframe每页……字体大小差异比焦点问题要好。 . 我想这是一个很好的权衡
#wrap {
width: 115%;
height: 2000px;
padding: 0;
overflow: hidden;
}
#frame {
-ms-zoom: 0.5;
-ms-transform-origin: 0 0;
-moz-transform: scale(0.75);
-moz-transform-origin: 0px 75px;
-o-transform: scale(0.75);
-o-transform-origin: 0px 75px;
-webkit-transform: scale(0.75);
-webkit-transform-origin: 0 0;
}
#frame {
width: 115%;
height: 2000px;
overflow: hidden;
}
<div id="wrap">
<iframe id="frame" src="http://hempseedoilsoap.com/" scrolling="auto" align="center"></iframe>
</div>
回答by thecoshman
Well, in short no.
嗯，总之没有。
You can use in-line CSS to set the width/height to 600px and then also set the overflow:hidden
您可以使用内嵌 CSS 将宽度/高度设置为 600px，然后还设置 overflow:hidden
