将iframe内容高度设置为动态自动调整大小 [英] Set iframe content height to auto resize dynamically
问题描述
我自己正在寻找一个简单的解决方案，用它中的内容来改变iframe的高度。
I was myself searching for a simple solution to change the height of an iframe with the content in it.
似乎规则是你不能从持有iframe的页面获取iframe的高度。这是因为安全性显而易见。我们怎么做？
It seems like the rules are that you can't get the height of the iframe from the page holding it. This is because of security apparently. How can we do this?
推荐答案
在iframe中
这意味着您必须在iframe页面中添加一些代码。
只需将此脚本添加到您的代码中IFRAME：
In the iframe: So that means you have to add some code in the iframe page. Simply add this script to your code IN THE IFRAME:
<body onload="parent.alertsize(document.body.scrollHeight);">
在保留页面中：
在持有iframe（在我的情况下ID =myiframe）添加一个小的javascript：
In the holding page: In the page holding the iframe (in my case with ID="myiframe") add a small javascript:
<script>
function alertsize(pixels){
pixels+=32;
document.getElementById('myiframe').style.height=pixels+"px";
}
</script>
现在发生的事情是，当加载iframe时，它会在父窗口中触发一个javascript，该窗口位于这种情况是持有iframe的页面。
What happens now is that when the iframe is loaded it triggers a javascript in the parent window, which in this case is the page holding the iframe.
对于该JavaScript函数，它会发送其（iframe）高度的像素数。
To that JavaScript function it sends how many pixels its (iframe) height is.
父窗口取数字，向它添加32以避免滚动条，并将iframe高度设置为新数字。
The parent window takes the number, adds 32 to it to avoid scrollbars, and sets the iframe height to the new number.
就是这样，没有别的需要。
That's it, nothing else is needed.
但是如果你想知道一些小技巧继续阅读......
But if you like to know some more small tricks keep on reading...
IFRAME中的动态高度？
如果您喜欢我切换内容，iframe高度将会改变（没有页面重新加载并触发onload） 。
我通常会在网上找到一个非常简单的切换脚本：
DYNAMIC HEIGHT IN THE IFRAME? If you like me like to toggle content the iframe height will change (without the page reloading and triggering the onload). I usually add a very simple toggle script I found online:
<script>
function toggle(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'block' ) el.style.display = 'block';
else el.style.display = 'none';
}
</script>
到该脚本只需添加：
<script>
function toggle(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'block' ) el.style.display = 'block';
else el.style.display = 'none';
parent.alertsize(document.body.scrollHeight); // ADD THIS LINE!
}
</script>
如何轻松使用上述脚本：
How you use the above script is easy:
<a href="javascript:toggle('moreheight')">toggle height?</a><br />
<div style="display:none;" id="moreheight">
more height!<br />
more height!<br />
more height!<br />
</div>
对于那些喜欢剪切和粘贴的人从这里开始是两页。在我的情况下，我将它们放在同一个文件夹中，但它也应该跨域工作（我认为......）
For those that like to just cut and paste and go from there here is the two pages. In my case I had them in the same folder, but it should work cross domain too (I think...)
完整保留页面代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>THE IFRAME HOLDER</title>
<script>
function alertsize(pixels){
pixels+=32;
document.getElementById('myiframe').style.height=pixels+"px";
}
</script>
</head>
<body style="background:silver;">
<iframe src='theiframe.htm' style='width:458px;background:white;' frameborder='0' id="myiframe" scrolling="auto"></iframe>
</body>
</html>
完成iframe代码：（此iframe名为theiframe.htm）
Complete iframe code: (this iframe named "theiframe.htm")
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>IFRAME CONTENT</title>
<script>
function toggle(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'block' ) el.style.display = 'block';
else el.style.display = 'none';
parent.alertsize(document.body.scrollHeight);
}
</script>
</head>
<body onload="parent.alertsize(document.body.scrollHeight);">
<a href="javascript:toggle('moreheight')">toggle height?</a><br />
<div style="display:none;" id="moreheight">
more height!<br />
more height!<br />
more height!<br />
</div>
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
THE END
</body>
</html>
这篇关于将iframe内容高度设置为动态自动调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
