iframe高度自适应,终于解决了
一直被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高度自适应,终于解决了相关推荐
- 原创,真正解决iframe高度自适应的问题.兼容各浏览器
在Google输入关键字"iframe自适应高度"之后你会发现有"找到约 153,000 条结果",我大概的看了一下,发现基本上就那两三篇文章被转载来转载去.真 ...
- 真正解决iframe高度自适应问题
1.前言 解决iframe高度自适应问题有两种方法 1.pym 2.手动设置iframe的高度 本文主要是总结第二种实现方式,因为第一种pym.js插件我没用懂 如果使用iframe时,遇到以下的需求 ...
- 解决iframe高度自适应
解决iframe高度自适应 原因 第一种方法 第二种方法 原因 iframe的高度不会随着页面高度的变化而变化,可能会导致页面显示不全,或者页面下方有空白的问题. 第一种方法 这个方式更适用于嵌套的页 ...
- html iframe自动高度,真正解决iframe高度自适应问题
1.前言 解决iframe高度自适应问题有两种方法 1.pym 2.手动设置iframe的高度 本文主要是总结第二种实现方式,因为第一种pym.js插件我没用懂 如果使用iframe时,遇到以下的需求 ...
- CSS完美实现iframe高度自适应(支持跨域)
https://blog.csdn.net/qq_32915337/article/details/79900222 Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用 ...
- 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】
Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...
- iframe高度自适应问题
今天写了一下html静态页,遇到iframe高度自适应问题.本来是使用bootstrap的,看它上面的文档说直接使用它们给好样式就可以了.但是并没有达到要的效果. 最后使用了这个中方法解决了. < ...
- iframe html高度自适应,CSS实现iframe高度自适应示例
高度自适应的实现方法有不少了,今天我们以css iframe高度自适应示例来为各位引起一些js与jquery的例子,有兴趣的可以和小编一起来看看. 前因:某个项目为了统计效果,把咨询的页面窗口内嵌放进 ...
- 6种iframe高度自适应的方法
js自适应高度,实际上就是设置iframe的高度,设置等于内嵌网页的高度,从而看不到滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用.我们可以通过css来给它直接定义一个高度,同样可以实现上面的需 ...
- Iframe高度自适应(兼容IE/Firefox、同域/跨域)
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...
最新文章
- 基本的函数返回值 使用
- 裸centos安装PCRE时报错解决
- 用C语言解“逆序的三位数”问题
- 小米运动蓝牙耳机重新配对_运动高颜值蓝牙耳机推荐,开学选购蓝牙耳机必备攻略...
- jeecms系统_自定义对象流程
- How draw a stem -and -leaf amp; box-plot display by R.or Python
- python路径分隔符_Python:当读取一个没有默认分隔符的文件(包含数百万条记录)并将其放入dataframe (pa-问答-阿里云开发者社区-阿里云...
- java导出word(带图片)
- cmder上传文件到服务器,wget 结合everything上传文件到服务器端(以及更改ip地址)...
- Angular ng-container元素的学习笔记
- 事件捕获(capture)和冒泡事件(Bubble)
- 实时帧数手机_RTX 3080 有多大升级必要?绝地求生帧数实测-RTX 3080 ——快科技(驱动之家旗下媒体)-...
- 前景检测算法(一)--综述
- Android SurfaceView概述
- 周剑:国产商业智能 BI 这 20 年(1997~2017)
- 同花顺开放接口api_接口大师,即刻构建你的OpenAPI+开放平台
- ACM / ICPC 在线OJ(Online judge)
- ASP.NET/C# 控制器Controller的深入理解
- 【附源码】计算机毕业设计SSM芮城县十全十美火锅店点餐系统
- 金博科技果园分销商城系统APP定制开发