iframe根据子页面的内容来设置高度
Posted zimengxiyu
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iframe根据子页面的内容来设置高度相关的知识,希望对你有一定的参考价值。
以下的方法必须起一个页面服务才能使用(通过域名或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根据子页面的内容来设置高度的主要内容,如果未能解决你的问题,请参考以下文章