html iframe自动高度,真正解决iframe高度自适应问题
1.前言
解决iframe高度自适应问题有两种方法
1.pym
2.手动设置iframe的高度
本文主要是总结第二种实现方式,因为第一种pym.js插件我没用懂
如果使用iframe时,遇到以下的需求:
iframe的高度始终等于嵌入页面内容的高度,而不是屏幕的高度
右侧不允许出现两个滚动条
iframe的高度自适应不仅仅是指刚加载进来时,也有可能嵌入内容的高度会随点击变化(如:下拉菜单,左侧导航栏等)
页面可能同时嵌入多个iframe
2.contentWindow对象
*需要起个服务,不要直接在本地打开
这是个只读属性,返回指定的iframe的window对象
拿到这个对象,就可以根据正常网页的方法拿到嵌入(子)网页的文档高度,然后把值附给父页面的iframe的height。
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.body.scrollHeight;
}
}
};
为了监测网页高度是否因为点击了某个下拉按钮高度变化,我们建立一个定时器任务,这样一直监视着子网页的高度。
setInterval(function () {
setIframeHeight($('#iframe')[0])
}, 200)
页面有可能同时存在多个iframe
$(".flexiframe").each(function (index) {//iframe公用类名:flexiframe
var that = $(this);
(function () {
setInterval(function () {
setIframeHeight(that[0])
}, 200)
})(that)
});
如果此时,你发现当子页面高度变高时,高度可以自适应的变高,但在变低时,会发现父页面的高度并没有向我们想象的随着子页面降低,导致底部留有大面积空白的问题,请继续往下看
3.文档声明的重要性
将子页面的文档声明改为就好了
4.demo
父页面:a.html
a
./flexiframe.js
// 使用前先将子页面文档声明改为
//
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.body.scrollHeight;
}
}
};
$(".flexiframe").each(function (index) {
var that = $(this);
(function () {
setInterval(function () {
setIframeHeight(that[0])
}, 200)
})(that)
});
子页面b.html,分别注释两种声明方式,点击变大变小按钮看一下右侧滚动条的变化,(细节可以F12看一下iframe种的html和body跟div的高度关系)
小
$('#btn').on('click', function () {
if ($(this).text() == '小') {
$(this).text('大').parent().css('height', '200px')
} else {
$(this).text('小').parent().css('height', '2000px')
}
})
5.总结
1.有时间还是要了解下html的进化历史。
2.本文flexiframe.js可以直接使用,但是只支持同源下父页面可以通过contentWindow获取子页面的内容高度,跨域的下次再说。
3.欢迎指出问题或留言加深本文的深度,例如html5已经不需要声明DTD,但是我解决这个问题不得不改一下DOCTYPE,退化到html4,为什么在html5中子页面html和body的高度不是由内部的内容决定的,而是等于父元素iframe的高度?
html iframe自动高度,真正解决iframe高度自适应问题相关推荐
- 原创,真正解决iframe高度自适应的问题.兼容各浏览器
在Google输入关键字"iframe自适应高度"之后你会发现有"找到约 153,000 条结果",我大概的看了一下,发现基本上就那两三篇文章被转载来转载去.真 ...
- html iframe自动高度,iframe高度自适应撑开
iframe在div中如何自适应高度 div中的iframe高度和宽度自适应的问题 我用bootstrap布局,上边部分为导航菜单,左边为一级菜单. DIV里嵌套Iframe,让Iframe及DIV高 ...
- 真正解决iframe高度自适应问题
1.前言 解决iframe高度自适应问题有两种方法 1.pym 2.手动设置iframe的高度 本文主要是总结第二种实现方式,因为第一种pym.js插件我没用懂 如果使用iframe时,遇到以下的需求 ...
- php iframe 自适应高度,两个iframe自适应高度的解决方法
很多小伙伴在做网站的时候对于解决 1.需求分析: 使页面中的iframe可以自适应高度,避免页面高度增加的时候页面和iframe会同时出现滚动条. 2.方法一: 在iframe上面直接加onload的 ...
- 解决iframe高度自适应
解决iframe高度自适应 原因 第一种方法 第二种方法 原因 iframe的高度不会随着页面高度的变化而变化,可能会导致页面显示不全,或者页面下方有空白的问题. 第一种方法 这个方式更适用于嵌套的页 ...
- html qq下高度,怎么知道iframe内容高度
设置边框的宽度和高度 用于设置文本或图形的浮动图文框或容器. BORDER 设定围绕图文框的边缘宽度 FRAMEBODER 设置边框是不否为3维(0=否,1=是) HEIGHT,WIDTH 设质边框的 ...
- iframe自适应高度(随内容高度变化)
转载(来源忘记了...) <!--内容部分--> <div class="con"><iframe id="mainFrame" ...
- 内嵌框架iframe在火狐ff下自适高度(ie6、ie7、ff都正常)
1.脚本 在调用iframe的页面添加脚本 var FFextraHeight = 0; if(window.navigator.userAgent.indexOf("Firefox&quo ...
- iframe 自动适应高和宽问题 和 其他Frame操作技巧
< DOCTYPE html PUBLIC -WCDTD XHTML TransitionalEN httpwwwworgTRxhtmlDTDxhtml-transitionaldtd> ...
最新文章
- android6.0 主题,Android 6.0 DatePickerDialog主题
- Redis 配置连接池,redisTemplate 操作多个db数据库,切换多个db,解决JedisConnectionFactory的设置连接方法过时问题。(转)
- C++ stringstream的用法
- sftp 中文乱码 连接后_sftp服务器中文乱码
- 从零开始编写自己的C#框架(17)——Web层后端首页
- 阿里资深技术专家:优秀的数据库存储引擎应具备哪些能力?
- instr函数 mysql_mysql数据库中查找字串出现的位置instr函数
- mysql 批量插入数据
- 大学生恋爱交友软件03(小幸运)——痛点分析
- Sql 查询库、表、列名的语句
- VSFlexGrid控件
- Oracle 子查询优化思路
- 发票识别 表格票据识别
- 自己写的网页放在github里面
- osu计算机科学硕士,OSU的CSE「俄亥俄州立大学计算机科学与工程系」
- 黑苹果系统的优化与问题解决(一)
- selenium翻页获取京东图书名称和价格
- 软件性能测试报告收费,软件性能测试报告模板
- matlab与maple互联,Maple与Matlab
- Matlab中在一个矩阵后面加apos是什么意思?绘图时出现错误该如何修改,麻烦解答一下,谢谢了
热门文章
- Java私有成员可以被子类继承
- java 找不到主类或无法加载_Java找不到或无法加载主类解决方法
- php源码解密微盾,php源码加密 仿微盾PHP加密专家(PHPCodeLock)_PHP教程
- python学习之生成一个二维码(一)
- js根据15,18位身份证号获取生日与性别
- 详解反转字符串算法题
- ensp两台路由器不同网段相互访问
- 中国石油大学《机械原理》第三次在线作业
- 圣诞夜工程师写了表白情诗,你会沉迷哪一首?
- 华为harmonyos 2.0,华为HarmonyOS 2.0正式发布 使能全场景智慧生态