iframe自适应高度的方法

很长时间没有更新博客了，小编的团队由于工作的繁忙，在制作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高度自适应，如果你还在网上到处找寻，不妨试试拓源给您推荐的这个方法。