html iframe高度自适应
2024-10-21 12:43:56
想到的一种办法是,在父页面里获取子页面的高度,在父页面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>
最新文章
- jni操作jobject
- 大家都在用PDA条码扫描枪管理企业仓库 PDA无线数据采集程序
- MAC OS上Nginx安装
- WordPress Event Easy Calendar插件多个跨站请求伪造漏洞
- T-SQL语言基础
- 设置ListView每条数据之间的间隔
- Linux(8)查看服务器系统信息
- java设计模式-----11、代理模式
- CSS学习笔记五:display,position区别
- ubuntu16.04无法获取ip地址的解决方案
- python pymsql的用法 180903
- Jenkins可持续集成项目搭建——配置Jenkins基本设置 &; 运行脚本报错点
- Spring Cloud Config 分布式配置中心【Finchley 版】
- leetcode136
- MyBatis源码解析【7】接口式编程
- Python3 解析excel文件
- Go Example--map
- nodepad++ 正则 替换
- LOJ#6544. 杀苍蝇(计算几何)
- K:栈和队列的比较
热门文章
- macOS 10.14虚拟机安装教程
- [Swift]LeetCode54. 螺旋矩阵 | Spiral Matrix
- [Swift]LeetCode381. O(1) 时间插入、删除和获取随机元素 - 允许重复 | Insert Delete GetRandom O(1) - Duplicates allowed
- [Swift]LeetCode791. 自定义字符串排序 | Custom Sort String
- 洛谷P2089烤鸡
- 分布式事务之如何基于RocketMQ的事务消息特性实现分布式系统的最终一致性?
- Kafka对Java程序员有多重要?连阿里都再用它处理亿万级数据统计
- 【干货】.NET WebApi HttpMessageHandler管道
- asp.net core 系列 19 EFCore介绍
- 代理自动配置文件PAC的使用方法