html iframe高度自适应
程序员文章站
2022-05-14 09:41:01
想到的一种办法是,在父页面里获取子页面的高度,在父页面onlod里把获取到子页面的高度赋值给父页面iframe标签,不过这种方法感觉不是很好,因为浏览器兼容性不好,获取不到高度 这种方法有两种写法 还有一种是兼容性比较好的 ......
想到的一种办法是,在父页面里获取子页面的高度,在父页面onlod里把获取到子页面的高度赋值给父页面iframe标签,不过这种方法感觉不是很好,因为浏览器兼容性不好,获取不到高度
这种方法有两种写法
<script type="text/javascript"> // 计算页面的实际高度,iframe自适应会用到 function calcpageheight(doc) { var cheight = math.max(doc.body.clientheight, doc.documentelement.clientheight) var sheight = math.max(doc.body.scrollheight, doc.documentelement.scrollheight) var height = math.max(cheight, sheight) return height } var ifr = document.getelementbyid('ifr') ifr.onload = function() { var idoc = ifr.contentdocument || ifr.document var height = calcpageheight(idoc) ifr.style.height = height + 'px' } </script>
<script> // 计算页面的实际高度,iframe自适应会用到 function calcpageheight(doc) { var cheight = math.max(doc.body.clientheight, doc.documentelement.clientheight) var sheight = math.max(doc.body.scrollheight, doc.documentelement.scrollheight) var height = math.max(cheight, sheight) return height } window.onload = function() { var height = calcpageheight(document) parent.document.getelementbyid('ifr').style.height = height + 'px' } </script>
还有一种是兼容性比较好的
<iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameborder=0 scrolling=no width="100%" onload="iframeheight()" ></iframe>javascript代码: <script type="text/javascript" language="javascript"> function iframeheight() { var ifm= document.getelementbyid("iframepage"); var subweb = document.frames ? document.frames["iframepage"].document : ifm.contentdocument; if(ifm != null && subweb != null) { ifm.height = subweb.body.scrollheight; } } </script>
上一篇: 昨天带团队和领导吃饭
下一篇: 秋季学期学习总结