【HTML】iframe嵌套界面自适应,可高度自由收缩
最近在做网页时需要使iframe高度自适应,以提高用户体验,网上找了挺多都很复杂,最后找到了这个
HTML:
<div class="main_page">
<iframe scrolling="no" id="main" name="main" frameborder="0" src=""
style="min-height:600px;width:100%;height:100%;"></iframe>
</div>
JS:
<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
}
//根据ID获取iframe对象
var ifr = document.getElementById('main')
ifr.onload = function() {
//解决打开高度太高的页面后再打开高度较小页面滚动条不收缩
ifr.style.height='0px';
var iDoc = ifr.contentDocument || ifr.document
var height = calcPageHeight(iDoc)
if(height < 850){
height = 850;
}
ifr.style.height = height + 'px'
}
</script>
【HTML】iframe嵌套界面自适应,可高度自由收缩的更多相关文章
- iframe跨域自适应高度
思路: 现有主界面main在域a下,被嵌套页面B在域b下,被嵌套页面B又嵌套一个在域a下的中介页面A. 当用户打开浏览器访问mail.html的时候载入B,触发B的onload事件获取其自身高度,然后 ...
- easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法。$('#win').window()
easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法.$('#win').window() 以下是左边栏和头部外层遮罩显示和隐藏方法 /*外层 遮罩显示*/ function wrapMa ...
- iframe 自适应内容高度
在使用iframe的时候,会出现iframe不能随着内容的高度自动改变的情况,下面就介绍一种可以自适应高度的办法.<br/> <pre> <iframe id=" ...
- jquery库实现iframe自适应内容高度和宽度
javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码! <iframe src="index.php" id=&qu ...
- 设置iframe高度自适应屏幕高度
写在前面: 最近在搭建项目前台页面框子的时候,把iframe设置成了固定的高度,导致不同的电脑尺寸访问的时候,高度差异较大,故查了下,将iframe设置成自动适应屏幕高度的方式,这里记录下. 还是直接 ...
- js自适应屏幕高度
//自适应屏幕高度 $(window).resize(function() { hightChange(); }); function hightChange(){ ; $();// iframe i ...
- 弹出窗口内嵌iframe 框口自适应
说一下,弹出窗口还有内嵌一个iframe 这种模式应该是不科学的,但是公司项目里面就偏偏用到了,它这高低还不能只适应,所以我痛苦的日子来了 分析一下: 首先window.showDialog 方法的时 ...
- 移动端web页面列表类上拉加载,查看详情,iframe嵌套第三方页面遇到的问题以及解决办法
1.移动端上拉加载 网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...
- css实现自适应屏幕高度;
css实现自适应屏幕高度: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...
随机推荐
- 【Git】git使用 - 冲突conflict的解决演示
冲突的解决 (如果git使用不熟练)建议在push不了时,pull之前.在本地创建一个新的分支并commit到local,以保证本地有commit记录,万一出什么问题,可以找回代码,以免代码丢失. ( ...
- CF594D REQ [离线+树状数组,欧拉函数]
设 \[x = \prod_{i=1}^{cnt} p_i^{k_i} [p_i\in prime]\] 那么显然 \[\varphi(x) = x*\frac{1} {\prod_{i=1}^{cn ...
- [USACO19OPEN]Valleys P
题意 洛谷 做法 用并查集维护区域,剩下的就只用判是否有洞就好了 然后手玩出一个结论:凸角为\(+1\),凹角为\(-1\),和为\(sum\),洞数\(h\),满足\(sum=4-4h\) 位置\( ...
- win10创建本地用户
win+r,输入lusrmgr.msc win+i
- 硬核干货 | C++后台开发学习路线
2020秋招提前批 C/C++相关开发 拿到腾讯.华为等offer 学习路线及时间安排 推荐时间为4个月,包括四部分:语言,计算机基础知识,项目基础知识,项目实践. 语言 推荐学习1个月 学习方针:视 ...
- linux系统如何进行录屏
linux系统如何录屏安装SimpleScreenRecorder 按Ctrl+ALt+T打开终端 添加源: sudo add-apt-repository ppa:maarten-baert/sim ...
- 剑指offer-面试题18-删除链表的节点-链表
/* 题目:给定单向链表的头指针和一个节点指针,定义一个函数在O(1)时间内删除该节点. */ /* 思路: 将要删除的节点的下一个节点的value和next复制过来,删除下一个节点. 考虑两种特殊情 ...
- Android_AsyncTask异步类
·AsyncTask是一个轻量级的异步抽象类 ·Android程序刚启动时,会同时启动一个像一个的主线程,这个主线程主要负责处理与UI有关的事件,有时也被称为UI线程,Android app中必须遵循 ...
- HTML5,从零开始
一.网页的组成部分 <!DOCTYPE html> <html> <head> <title>这是标题</title> <meta c ...
- C# 一次循环获取树的两种方法
第一种方法好些 第二种方法如果中间断开就会成为一级 private static List<Menu> MenuTree() { , ParentId = , Name = "a ...