iframe 标签自适应文档的高度

前言

今天接着写基础的技术点，工作中遇到了界面上左右侧出现了两个滚动条，这个对用户来说太不友好了，这种情况也是不允许出现的。所以必须让右侧有且仅有一个上下滚动条，经过查看代码发现前辈使用的是iframe标签。说实话这个标签我真的不熟悉怎么使用。。。。经过一番折腾后终于完成了。

正文

修改之前的效果图

更改之后的效果是什么样的呢？来看图吧！
来看看代码

//关键代码οnlοad="reinitIframe()"，调用的方法
<iframe onload="reinitIframe()" class="texttail" id="texttail" style="overflow:hidden;" height="100%" name="texttail" src="./index/article.html?param1=aa&param2=bb"  ></iframe>

<script>
//页面自适应高度
		window.onresize = function () {
            reinitIframe();
        }
        function reinitIframe(){
            var iframe = document.getElementById("texttail");
            try{
                var bHeight = iframe.contentWindow.document.body.scrollHeight;
                var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                var height = Math.min(bHeight, dHeight);
                iframe.height = height+50;
                // console.log(iframe.height);
            }catch (ex){}
        }
        // 定时触发
        window.setInterval("reinitIframe()", 10);
</script>

这段代码有些人说不能复用，不知道是因为什么。

结束

代码的写法有很多种，不同水平的程序员写的代码也是不一样的，写好高质量的代码前提是要对基础掌握的扎实，并且能够灵活应用。