最近在做网页时需要使iframe高度自适应,以提高用户体验,网上找了挺多都很复杂,最后找到了这个

HTML:

  1. <div class="main_page">
  2. <iframe scrolling="no" id="main" name="main" frameborder="0" src=""
  3. style="min-height:600px;width:100%;height:100%;"></iframe>
  4. </div>

JS:

  1. <script>
  2. // 计算页面的实际高度,iframe自适应会用到
  3. function calcPageHeight(doc) {
  4. var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
  5. var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
  6. var height = Math.max(cHeight, sHeight)
  7. return height
  8. }
  9. //根据ID获取iframe对象
  10. var ifr = document.getElementById('main')
  11. ifr.onload = function() {
  12. //解决打开高度太高的页面后再打开高度较小页面滚动条不收缩
  13. ifr.style.height='0px';
  14. var iDoc = ifr.contentDocument || ifr.document
  15. var height = calcPageHeight(iDoc)
  16. if(height < 850){
  17. height = 850;
  18. }
  19. ifr.style.height = height + 'px'
  20. }
  21. </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. Protobuf用法

    官方文档 什么是 protocol buffer? Protocol buffers are a flexible, efficient, automated mechanism for serial ...

  2. MySQL基础入门使用和命令的使用

    数据库了解 概念 数据库就是一种特殊的文件,其中存储着需要的数据 一个数据库可以有多张表 MySQL是一种关系型数据库 具有关联性数据的就是关系型数据库 MySQL是一种软件可以用来创建mysql数据 ...

  3. 剑指offer-面试题50-第一个只出现一次的字符-哈希表

    /* 题目: 求字符串第一个只出现一次的字符. */ /* 思路: 使用map遍历两次,第一次计数,第二次找到计数为1的第一个字符. */ #include<iostream> #incl ...

  4. Beego 输出数据格式JSON、XML、JSONP

    JSON.XML.JSONP beego 当初设计的时候就考虑了 API 功能的设计,而我们在设计 API 的时候经常是输出 JSON 或者 XML 数据,那么 beego 提供了这样的方式直接输出: ...

  5. Patter discovery VS clustering

    “pattern driven” (PD) is based on enumerating candidate patterns in a given solution space and picki ...

  6. 刷题78. Subsets

    一.题目说明 题目78. Subsets,给一列整数,求所有可能的子集.题目难度是Medium! 二.我的解答 这个题目,前面做过一个类似的,相当于求闭包: 刷题22. Generate Parent ...

  7. QQ全量上云,你想了解的技术细节都在这

    腾讯的业务体量非常庞大,在2019年,腾讯已拥有超过了100万台服务器,其中,社交业务包括QQ和空间的体量有近20万台服务器,且分布在全国三地. 把QQ这头大象搬到云上并非易事.作为腾讯最庞大.最悠久 ...

  8. Android实战项目:房贷计算器

    APP源码已上传到我的GitHub:https://github.com/zdm-code/Android-learning/tree/master/android_learning/mortgage ...

  9. IO流学习之File类

    File类 Java文件类以抽象的方式代表文件名和目录路径名.该类主要用于文件和目录的创建.文件的查找和文件的删除等. File对象代表磁盘中实际存在的文件和目录.就是把文件和目录转换成对象,读取到内 ...

  10. 大json直接序列化成dataset

    rtnDs= JsonConvert.DeserializeObject<DataSet>(strBuff);