码迷,mamicode.com
首页 > 其他好文 > 详细

iframe根据子页面的内容来设置高度

时间:2020-01-12 00:30:48      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:iframe   ie8   neu   rip   main   设置   fun   根据   var   

以下的方法必须起一个页面服务才能使用(通过域名或ip地址来访问)并且的保证父页面与子页面是在同一域名下,不然是会报错的

contentDocument 可以获得iframe子窗口的document对象,兼容ie8+

contentWindow    这是个只读属性,返回指定的iframe的窗口对象

iframe加载完毕之后通过contentDocument 或者 contentWindow 这个对象来获取iframe子页面的内容高度,从而来设置设置iframe的高度.再给iframe设置高度时子页面的默认样式margin要记得清除(不清楚是会有这个margin大小的误差的,有这个margin的话子页面的内容就无法全部显示出来了).

iframe的父页面

<iframe scrolling="no" id="main" name="main" frameborder="0" src="iframe子页面1.html"></iframe>

        <script type="text/javascript">
            //根据ID获取iframe对象
            var ifr = document.getElementById(‘main‘);

            ifr.onload = function() {
                //解决滚动条不收缩
                ifr.style.height = 0+‘px‘;

                var iDoc = ifr.contentDocument || ifr.contentWindow.document;
                
                var height = iDoc.documentElement.clientHeight || iDoc.body.clientHeight;

                console.log(iDoc.documentElement.clientHeight,iDoc.body.clientHeight);
                
                ifr.style.height = height + ‘px‘;
                console.log(height);   
            }
</script> 

iframe根据子页面的内容来设置高度

标签:iframe   ie8   neu   rip   main   设置   fun   根据   var   

原文地址:https://www.cnblogs.com/zimengxiyu/p/12181287.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!