冰豆网

分享网络精彩
bingdou.com.cn

iframe自适应高度的方法

时间:2019-10-20加入收藏

接触WEB前端的同学,有很多人曾被iframe的自适应高度所困扰过,今天冰豆网给大家分享iframe自适应高度的方法。
iframe的宽度默认为300px,高度默认为150px,如果需要自适应高度,则需要使用以下代码:
需要注意的是,frameresize()方法必须放置在iframe代码的后面,否则无效。

<iframe id="iframepage" name="iframepage" width="100%" height="100%" src="//tv.bingdou.net/live.html" allowTransparency="true" style="border:none; overflow-x:none;" scrolling="auto"></iframe>
<script type="text/javascript" src="https://lib.baomitu.com/jquery/1.8.3/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>

打 赏
打赏二维码

TGA:

分享到:


官方微信二维码冰豆网官方微信公众号