Html 如何动态设置 iframe 大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7317781/
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 set iframe size dynamically
提问by Fero
How should I set the dimensions of an iframe dynamically, so the size is flexible for different viewport sizes?
我应该如何动态设置 iframe 的尺寸，以便不同视口尺寸的尺寸灵活？
For example:
例如：
<iframe src="html_intro.asp" width="100%" height="300">
<p>Hi SOF</p>
</iframe>
In this case the height is different depending on the browser's window size. It should be set dynamically depending on the size of the browser window.
在这种情况下，高度因浏览器的窗口大小而异。它应该根据浏览器窗口的大小动态设置。
At any size, the iframe aspect ratio should be the same. How can this be done?
在任何尺寸下，iframe 的纵横比都应该相同。如何才能做到这一点？
回答by Naveen Velaga
If you use jquery, it can be done by using $(window).height();
如果你使用jquery，它可以通过使用来完成 $(window).height();
<iframe src="html_intro.asp" width="100%" class="myIframe">
<p>Hi SOF</p>
</iframe>
<script type="text/javascript" language="javascript">
$('.myIframe').css('height', $(window).height()+'px');
</script>
回答by Graeme Leighfield
Not quite sure what the 300 is supposed to mean? Miss typo? However for iframes it would be best to use CSS :) - Ive found befor when importing youtube videos that it ignores inline things.
不太清楚 300 是什么意思？错别字小姐？然而，对于 iframes 最好使用 CSS :) - 我在导入 youtube 视频时发现它忽略了内联内容。
<style>
#myFrame { width:100%; height:100%; }
</style>
<iframe src="html_intro.asp" id="myFrame">
<p>Hi SOF</p>
</iframe>
回答by Lamecarlate
Have you tried height="100%"in the definition of your iframe ? It seems to do what you seek, if you add height:100%in the css for "body" (if you do not, 100% will be "100% of your content").
您是否尝试过height="100%"iframe 的定义？如果您height:100%为“body”添加css（如果不这样做，100% 将是“100% 的内容”），它似乎可以满足您的需求。
EDIT: do not do this. The heightattribute (as well as the widthone) must have an integer as value, not a string.
编辑：不要这样做。该height属性（以及在width一个）必须具有一个整数作为值，而不是字符串。
回答by Rocco The Taco
I've found this to work the best across all browsers and devices (PC, tables & mobile).
我发现这在所有浏览器和设备（PC、表格和移动设备）上效果最好。
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
// here you can make the height, I delete it first, then I make it again
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}
</script>
<iframe id="idIframe" onload="iframeLoaded()" frameborder="0" src="yourpage.php" height="100%" width="100%" scrolling="no"></iframe>
