分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

html iframe高度自适应

发布时间:2023-09-06 02:31责任编辑:郭大石关键词:自适应

想到的一种办法是,在父页面里获取子页面的高度,在父页面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>

html iframe高度自适应

原文地址:https://www.cnblogs.com/zxf100/p/10322564.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved