iframe 高度自适应

最新推荐文章于 2021-06-03 18:44:35 发布

瑞设计

最新推荐文章于 2021-06-03 18:44:35 发布

阅读量363

点赞数

本文链接：https://blog.csdn.net/li791226892/article/details/40622479

版权

两种方法可以实现，google浏览器需要配置环境，静态页看不到效果！

1jquery 实现iframe高度只适应，需要引入jquery库

  <iframe id="mainframe" name="mainframe" marginwidth="0" marginheight="0" src="main.html" frameborder="0" width="100%" scrolling="no" height="100%"></iframe>
                <script type="text/javascript">
                    jQuery("#mainframe").load(function () {
                        var mainheight = jQuery(this).contents().find("#box").height() + 30;
                        jQuery(this).height(mainheight);
                    });
                </script>

2.利用js实现frame高度自适应

<iframe id="test" name="bdframe" src="main.html" οnlοad="Javascript:SetWinHeight(this)"   frameborder="0" scrolling="no" width="100%"></iframe> 
<script type="text/javascript">
function SetWinHeight(obj)
{
    var test=obj;
    if (document.getElementById)
    {
        if (test && !window.opera)
        {
            if (test.contentDocument && test.contentDocument.body.offsetHeight) 
                test.height = test.contentDocument.body.offsetHeight; 
            else if(test.Document && test.Document.body.scrollHeight)
                test.height = test.Document.body.scrollHeight;
        }
    }
}
</script>