摘要:欢迎指出问题或留言加深本文的深度,例如已经不需要声明,但是我解决这个问题不得不改一下,退化到,为什么在中子页面和的高度不是由内部的内容决定的,而是等于父元素的高度
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的高度关系)
5.总结
1.有时间还是要了解下html的进化历史。
2.本文flexiframe.js可以直接使用,但是只支持同源下父页面可以通过contentWindow获取子页面的内容高度,跨域的下次再说。
3.欢迎指出问题或留言加深本文的深度,例如html5已经不需要声明DTD,但是我解决这个问题不得不改一下DOCTYPE,退化到html4,为什么在html5中子页面html和body的高度不是由内部的内容决定的,而是等于父元素iframe的高度?
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/52241.html
摘要:欢迎指出问题或留言加深本文的深度,例如已经不需要声明,但是我解决这个问题不得不改一下,退化到,为什么在中子页面和的高度不是由内部的内容决定的,而是等于父元素的高度 1.前言 解决iframe高度自适应问题有两种方法1.pym2.手动设置iframe的高度 本文主要是总结第二种实现方式,因为第一种pym.js插件我没用懂 如果使用iframe时,遇到以下的需求: iframe的高度始...
摘要:自适应高度,其实就是设置的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。这个时候又有几种情况了。我们使用下的另一个页面来做代理,通过它获取页面的高度,并设定元素的高度。 JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同...
摘要:自适应高度,其实就是设置的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。这个时候又有几种情况了。我们使用下的另一个页面来做代理,通过它获取页面的高度,并设定元素的高度。 JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同...
摘要:自适应高度,其实就是设置的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。这个时候又有几种情况了。我们使用下的另一个页面来做代理,通过它获取页面的高度,并设定元素的高度。 JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同...
阅读 1385·2021-10-11 10:59
阅读 3066·2019-08-30 15:54
阅读 2688·2019-08-30 13:19
阅读 2409·2019-08-30 13:02
阅读 2333·2019-08-30 10:57
阅读 3293·2019-08-29 15:40
阅读 900·2019-08-29 15:39
阅读 2223·2019-08-29 12:40