将iframe内容高度设置为dynamic自动resize
我自己正在寻找一个简单的解决scheme来改变一个iframe的内容的高度。
看起来规则是,你不能从页面上获得iframe的高度。 这是因为安全显然。 我们应该怎么做?
在iframe中:这意味着您必须在iframe页面中添加一些代码。 只需将此脚本添加到您的代码在IFRAME中:
<body onload="parent.alertsize(document.body.scrollHeight);">
在持有页面:在持有iframe的页面(在我的情况下ID =“myiframe”)添加一个小的javascript:
<script> function alertsize(pixels){ pixels+=32; document.getElementById('myiframe').style.height=pixels+"px"; } </script>
现在发生的事情是,当加载iframe的时候,它会在父窗口中触发一个javascript,在这种情况下是持有iframe的页面。
对于JavaScript函数,它会发送多less像素(iframe)高度。
父窗口获取数字,向其添加32以避免滚动条,并将iframe高度设置为新数字。
就是这样,没有其他需要。
但如果你想知道更多的小技巧继续阅读…
animation高度在IFRAME? 如果你喜欢我喜欢切换内容的iframe高度将改变(没有页面重新加载和触发onload)。 我通常会在网上find一个非常简单的切换脚本:
<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>
你如何使用上面的脚本很容易:
<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>
对于那些喜欢只是剪切和粘贴,从这里走到这里是两页。 在我的情况下,我有他们在同一个文件夹,但它也应该跨域(我认为…)
完整保存页面代码:
<!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代码:(这个名为“theiframe.htm”的iframe)
<!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>
演示
简单的scheme:
<iframe onload="this.style.height=this.contentWindow.document.body.scrollHeight + 'px';" ...></iframe>
这适用于iframe和父窗口在同一个域中。 当两者在不同的领域时,这是行不通的。