iframe自适应高度的方法

web前端1289107年前 (2013-04-11)

很长时间没有更新博客了,小编的团队由于工作的繁忙,在制作ZBlog主题的时候,想到了iframe自适应高度的问题,现在分享给大家,希望可以为你带来帮助。

接触WEB前端的同学,有很多人曾被iframe的自适应高度所困扰过,今天拓源给大家分享iframe自适应高度的方法。

iframe的宽度默认为300px,高度默认为150px,如果需要自适应高度,则需要使用以下代码:

需要注意的是,frameresize()方法必须放置在iframe代码的后面,否则无效。

<iframe id="iframepage" name="iframepage" width="100%" height="100%" src="https://www.wulongmao.com/" allowTransparency="true" style="border:none; overflow-x:none;" scrolling="auto"></iframe><script type="text/Javascript" src="https://www.toyean.com/zb_users/upload/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高度自适应,如果你还在网上到处找寻,不妨试试拓源给您推荐的这个方法。

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。