将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和父窗口在同一个域中。 当两者在不同的领域时,这是行不通的。