今天帮一哥们的女朋友的亲戚整个网站，用的dedecms弄的，有段时间没接触dede了，感觉有点生疏，不过还好网站功能一般，所以花了半天时间给整出来了。在最后，由于该cms的留言板模块是独立出来的，我为了省事，就在一个页面用了iframe直接引用留言板的页面进来，可问题就出现了，就是高度不能自适应，给它定死高度吧，不太灵活，于是在网上搜了下iframe自适应高度的解决方法，搜了很多都是N年前的信息，有些早已不起作用了。但功夫不负有心人，最后还是让我找到了这个解决办法，仅在此记录一下吧！
| 代码如下 | 复制代码 |
|
<iframe id="frame_content" src="guestbook.php" scrolling="no" width="950" frameborder="0" onload="this.height=100"></iframe> <script type="text/javascript"> function reinitIframe () { var iframe = document.getElementById("frame_content"); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; var height = Math.max(bHeight, dHeight); iframe.height = height; }catch (ex){} } window.setInterval("reinitIframe()", 200); </script> |
|
今天拓源给大家分享iframe自适应高度的方法。
iframe的宽度默认为300px，高度默认为150px，如果需要自适应高度，则需要使用以下代码：
需要注意的是，frameresize()方法必须放置在iframe代码的后面，否则无效。
| 代码如下 | 复制代码 |
|
<iframe id="iframepage" name="iframepage" width="100%" height="100%" src="http://www.111cn.net/" allowTransparency="true" style="border:none; overflow-x:none;" scrolling="auto"></iframe> <script type="text/javascript" src="jquery.js"></script> <script language="javascript"> function frameresize(){ var winheight = $(window).height(); var iframeheight = winheight; $('#iframepage').css('height', iframeheight + 'px'); }; if(window.attachEvent){ document.getElementById("iframepage").attachEvent('onload', frameresize); } else{ document.getElementById("iframepage").addEventListener('load', frameresize, false); } $(window).resize(frameresize); frameresize(); </script> |
|
以上iframe代码为调用拓源网旗下网站乌龙猫的首页，可以看到iframe高度自适应
时间： 2024-09-24 10:50:18