【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 ...
随机推荐
- 刷题79. Word Search
一.题目说明 题目79. Word Search,给定一个由字符组成的矩阵,从矩阵中查找一个字符串是否存在.可以连续横.纵找.不能重复使用,难度是Medium. 二.我的解答 惭愧,我写了很久总是有问 ...
- SpringBoot项目自定义浏览器选项卡左上角图标(favicon.ico)-sunziren
favicon.ico是浏览器选项卡左上角的图标,可以放在静态资源路径下或者类路径下面.静态资源路径下的favicon.ico优先级高于类路径下的favicon.ico. 可以使用在线转换网站http ...
- 循环删除List集合的元素
之前在使用list集合循环删除元素的时候,竟然出现了集合内的元素不能删除成功的问题,之后整理了一下,发现大有玄机! 1.如果指定了list的size大小,会出现下标越界异常 List<Strin ...
- 《趣谈 Linux 操作系统》学习笔记(一):为什么要学 Linux 及学习路径
前言:学习的课程来自极客时间的专栏<趣谈 Linux 操作系统>,作者用形象化的比喻和丰富的图片让课程变得比较易懂,为了避免知识看过就忘,打算通过写学习笔记的形式记录自己的学习过程. Li ...
- C语言 if
C语言 if C语言支持最基本的三种程序运行结构:顺序结构.选择结构.循环结构. 顺序结构:程序按顺序执行,不发生跳转. 选择结构:依据是否满足条件,有选择的执行相应功能. 循环结构:依据条件是否满足 ...
- fiddler使用post方法带参数(base64)请求接口,模拟表单提交,类似工具postman
头格式如下: Content-Length: Content-Type: multipart/form-data; boundary=-------------------------- Host: ...
- .net mvc 使用 aspose.cells导出数据
public class AsposeCellsHelper { public Workbook workBook; public Worksheet worksheet; Style style; ...
- Android开发长按菜单上下文菜单
安卓开发中长按弹出菜单的创建方法: 1.首先给View注册上下文菜单registerForContextMenu(); 2.添加上下文菜单内容onCreateContextMenu(): ---可以通 ...
- 为什么要使用Redis? —— Redis实战经验
(序言,从一张思维导图开始,慢慢介绍我自己关于Redis的实战经验) 现在很多互联网应用的服务端都使用到了Redis,到底大家为什么要用Redis呢?Redis有很多特性,比如高性能.高可用.数据类型 ...
- dev 控件用法2 之repositoryItemSearchLookUpEdit
repositoryItemSearchLookUpEdit var y = userinfo.Select.ToList( a => new { userid = a.userid, code ...