最近在做网页时需要使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嵌套界面自适应,可高度自由收缩的更多相关文章

  1. iframe跨域自适应高度

    思路: 现有主界面main在域a下,被嵌套页面B在域b下,被嵌套页面B又嵌套一个在域a下的中介页面A. 当用户打开浏览器访问mail.html的时候载入B,触发B的onload事件获取其自身高度,然后 ...

  2. easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法。$('#win').window()

    easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法.$('#win').window() 以下是左边栏和头部外层遮罩显示和隐藏方法 /*外层 遮罩显示*/ function wrapMa ...

  3. iframe 自适应内容高度

    在使用iframe的时候,会出现iframe不能随着内容的高度自动改变的情况,下面就介绍一种可以自适应高度的办法.<br/> <pre> <iframe id=" ...

  4. jquery库实现iframe自适应内容高度和宽度

    javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码! ‍<iframe src="index.php" id=&qu ...

  5. 设置iframe高度自适应屏幕高度

    写在前面: 最近在搭建项目前台页面框子的时候,把iframe设置成了固定的高度,导致不同的电脑尺寸访问的时候,高度差异较大,故查了下,将iframe设置成自动适应屏幕高度的方式,这里记录下. 还是直接 ...

  6. js自适应屏幕高度

    //自适应屏幕高度 $(window).resize(function() { hightChange(); }); function hightChange(){ ; $();// iframe i ...

  7. 弹出窗口内嵌iframe 框口自适应

    说一下,弹出窗口还有内嵌一个iframe 这种模式应该是不科学的,但是公司项目里面就偏偏用到了,它这高低还不能只适应,所以我痛苦的日子来了 分析一下: 首先window.showDialog 方法的时 ...

  8. 移动端web页面列表类上拉加载,查看详情,iframe嵌套第三方页面遇到的问题以及解决办法

    1.移动端上拉加载 网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...

  9. css实现自适应屏幕高度;

    css实现自适应屏幕高度: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...

随机推荐

  1. Python3 协程相关 - 学习笔记

    什么是协程 协程的优势 Python3中的协程 生成器 yield/send yield + send(利用生成器实现协程) 协程的四个状态 协程终止 @asyncio.coroutine和yield ...

  2. Docker实战部署JavaWeb项目-基于SpringBoot

    最近在滴滴云上看到服务器很便宜,1核2G,1年只需要68块钱.下面是我基于Docker部署Javaweb服务的过程.目前我见过的最便宜的服务器,阿里云打折的时候都没有这么便宜啊,果断入手.有需要的话可 ...

  3. opencv —— 在 VS 中的配置

    添加一个新的 .cpp 文件到工程中 打开菜单栏视图中的属性管理器                                                      选择 Debug|x64 ...

  4. 论文阅读笔记(二十一)【CVPR2017】:Deep Spatial-Temporal Fusion Network for Video-Based Person Re-Identification

    Introduction (1)Motivation: 当前CNN无法提取图像序列的关系特征:RNN较为忽视视频序列前期的帧信息,也缺乏对于步态等具体信息的提取:Siamese损失和Triplet损失 ...

  5. python 队列、栈

    队列 常规队列 双端队列 优先级队列 栈

  6. 《C++面向对象程序设计》第6章课后编程题2拓展

    设计一个程序,其中有3个类CBank.BBank.GBank,分别为中国银行类,工商银行类和农业银行类.每个类都包含一个私有数据成员balance用于存放储户在该行的存款数,另有一个友元函数Total ...

  7. link(外部资源关系)

    规定了外部资源与当前文档的关系 常于链接样式表<link href="/media/examples/link-element-example.css" rel=" ...

  8. Oracle中表与包体用户没有操作权限问题

    一.表1.在stg用户下查看table_name 表是否存在select * from table_name 2 在表所在用户执行(授权)grant select,update on table_na ...

  9. html5的页面在IOS中,按钮 变成圆角怎么办?

      在button的css 中添加: -webkit-appearance: none;     border: none;     border-radius: 0; ok 的啦   文章来源:刘俊 ...

  10. dva-loading 实践用法

    dva 中页面过渡效果封装的很好,下面介绍常用的两个 js 库. 之前对 dva-loading 理解存在误区,认为只要在 index.js 中配置一下就没事了,事实上 dva-loading 只是提 ...