一直被iframe的高度自适应的问题困扰着,在项目中也是多次遇到。网上也有不少相关的代码,但是总不能满足自己的要求。在头痛了几次之后终于下定决心解决这个问题。

本代码主要解决的问题是:最外层滚动条随着iframe高度动态变化的问题。如果iframe高度比较大最外层就会出现滚动条,否则就不会。网上好多例子的问题都是iframe只保留最大的高度以至于页面内容高度很小但是右边还有滚动条。

话不多说,上代码。

1 /**2 * iframe自适应高度,height为手动设置的最小高度3  */
4 functioninitIframeHeight(height){5     var userAgent =navigator.userAgent;6     var iframe = parent.document.getElementById("contentIframe");7     var subdoc = iframe.contentDocument ||iframe.contentWindow.document;8     var subbody =subdoc.body;9     varrealHeight;10     //谷歌浏览器特殊处理
11     if(userAgent.indexOf("Chrome") > -1){12         realHeight =subdoc.documentElement.scrollHeight;13 }14     else{15         realHeight =subbody.scrollHeight;16 }17     if(realHeight <height){18 $(iframe).height(height);19 }20     else{21 $(iframe).height(realHeight);22 }23 }

亲测谷歌、火狐、ie8+通过。第一次发博文试试水 ^_^

转载于:https://www.cnblogs.com/weish/p/5358799.html

iframe高度自适应,终于解决了相关推荐

  1. 原创,真正解决iframe高度自适应的问题.兼容各浏览器

    在Google输入关键字"iframe自适应高度"之后你会发现有"找到约 153,000 条结果",我大概的看了一下,发现基本上就那两三篇文章被转载来转载去.真 ...

  2. 真正解决iframe高度自适应问题

    1.前言 解决iframe高度自适应问题有两种方法 1.pym 2.手动设置iframe的高度 本文主要是总结第二种实现方式,因为第一种pym.js插件我没用懂 如果使用iframe时,遇到以下的需求 ...

  3. 解决iframe高度自适应

    解决iframe高度自适应 原因 第一种方法 第二种方法 原因 iframe的高度不会随着页面高度的变化而变化,可能会导致页面显示不全,或者页面下方有空白的问题. 第一种方法 这个方式更适用于嵌套的页 ...

  4. html iframe自动高度,真正解决iframe高度自适应问题

    1.前言 解决iframe高度自适应问题有两种方法 1.pym 2.手动设置iframe的高度 本文主要是总结第二种实现方式,因为第一种pym.js插件我没用懂 如果使用iframe时,遇到以下的需求 ...

  5. CSS完美实现iframe高度自适应(支持跨域)

    https://blog.csdn.net/qq_32915337/article/details/79900222 Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用 ...

  6. 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...

  7. iframe高度自适应问题

    今天写了一下html静态页,遇到iframe高度自适应问题.本来是使用bootstrap的,看它上面的文档说直接使用它们给好样式就可以了.但是并没有达到要的效果. 最后使用了这个中方法解决了. < ...

  8. iframe html高度自适应,CSS实现iframe高度自适应示例

    高度自适应的实现方法有不少了,今天我们以css iframe高度自适应示例来为各位引起一些js与jquery的例子,有兴趣的可以和小编一起来看看. 前因:某个项目为了统计效果,把咨询的页面窗口内嵌放进 ...

  9. 6种iframe高度自适应的方法

    js自适应高度,实际上就是设置iframe的高度,设置等于内嵌网页的高度,从而看不到滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用.我们可以通过css来给它直接定义一个高度,同样可以实现上面的需 ...

  10. Iframe高度自适应(兼容IE/Firefox、同域/跨域)

    在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...

最新文章

  1. 基本的函数返回值 使用
  2. 裸centos安装PCRE时报错解决
  3. 用C语言解“逆序的三位数”问题
  4. 小米运动蓝牙耳机重新配对_运动高颜值蓝牙耳机推荐,开学选购蓝牙耳机必备攻略...
  5. jeecms系统_自定义对象流程
  6. How draw a stem -and -leaf amp; box-plot display by R.or Python
  7. python路径分隔符_Python:当读取一个没有默认分隔符的文件(包含数百万条记录)并将其放入dataframe (pa-问答-阿里云开发者社区-阿里云...
  8. java导出word(带图片)
  9. cmder上传文件到服务器,wget 结合everything上传文件到服务器端(以及更改ip地址)...
  10. Angular ng-container元素的学习笔记
  11. 事件捕获(capture)和冒泡事件(Bubble)
  12. 实时帧数手机_RTX 3080 有多大升级必要?绝地求生帧数实测-RTX 3080 ——快科技(驱动之家旗下媒体)-...
  13. 前景检测算法(一)--综述
  14. Android SurfaceView概述
  15. 周剑:国产商业智能 BI 这 20 年(1997~2017)
  16. 同花顺开放接口api_接口大师,即刻构建你的OpenAPI+开放平台
  17. ACM / ICPC 在线OJ(Online judge)
  18. ASP.NET/C# 控制器Controller的深入理解
  19. 【附源码】计算机毕业设计SSM芮城县十全十美火锅店点餐系统
  20. 金博科技果园分销商城系统APP定制开发

热门文章

  1. 【剑指offer】十九,数组中出现次数超过一半的数字
  2. 脚本解决.NET MVC按钮重复提交问题
  3. js导航条 二级滑动 模仿块级作用域
  4. opengl 区域填充之种子填充线扫描法
  5. seleniumpython定位网页元素方法_使用Selenium对网页元素进行定位的诸种方法
  6. Junit4 简单教程
  7. go 二进制程序守护_图解 Go 程序是怎样跑起来的
  8. 为什么写公众号,为什么改名字
  9. php+反序列化代码执行漏洞,PHP反序列化漏洞
  10. mysql 连续签到天数_最大连续签到天数-sql