iframe的高度自适应_div自适应高度

iframe的高度自适应_div自适应高度Demo页面:主页面iframe_a.html,被包含页面iframe_b.htm和iframe_c.html下面开始讲:通过Google搜索iframe自适应高度,结果5W多条,搜索iframe高度自适应,结果2W多条。我翻了前面的几十条,刨去大量的转载,有那么三五篇是原创的。而这几篇原创里面,基本上只谈到如何自适应静的东西,就是没有考虑到JS操作DOM之后,如

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用
Demo页面:主页面 iframe_a.html ,被包含页面 iframe_b.htm 和 iframe_c.html

下面开始讲:

通过Google搜索iframe 自适应高度,结果5W多条,搜索iframe 高度自适应,结果2W多条。

我翻了前面的几十条,刨去大量的转载,有那么三五篇是原创的。而这几篇原创里面,基本上只谈到如何自适应静的东西,就是没有考虑到JS操作DOM之后,如何做动态同步的问题。另外,在兼容性方面,也研究的不彻底。

这篇文章,希望在这两个方面再做一些深入。

可能有人还没接触到这个问题过,先说明一下,什么是自适应高度吧。所谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面,我们直接写死iframe高度就可以了。而如果iframe要切换页面,或者被包含页面要做DOM动态操作,这时候,就需要程序去同步iframe高度和被包含页的实际高度了。

顺便说下,iframe在迫不得已的时候才去用,它会给前端开发带来太多的麻烦。

传统做法大致有两个:

方法一,在每个被包含页在本身内容加载完毕之后,执行JS取得本页面的高度,然后去同步父页面的iframe高度。

方法二,在主页面iframe的onload事件中执行JS,去取得被包含页的高度内容,然后去同步高度。

在代码维护角度考虑,方法二是优于方法一的,因为方法一,每个被包含页都要去引入一段相同的代码来做这个事情,创建了好多副本。

两个方法都只处理了静的东西,就是只在内容加载的时候执行,如果JS去操作DOM引起的高度变化,都不太方便。

如果在主窗口做一个Interval,不停的来获取被包含页的高度,然后做同步,是不是即方便,又解决了JS操作DOM的问题了呢?答案是肯定的。

Demo页面:主页面 iframe_a.html ,被包含页面 iframe_b.htm 和 iframe_c.html

主页面代码示例:

<iframe id=”frame_content” src=”iframe_b.html” scrolling=”no” frameborder=”0″></iframe><script type=”text/javascript”>

function reinitIframe(){

var iframe = document.getElementById(“frame_content”);

try{

iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;

}catch (ex){}

}

window.setInterval(“reinitIframe()”, 200);

</script>一直执行,效率会不会有问题?

我做了测试,同时开5个窗口(IE6、IE7、FF、Opera、Safari)执行这个代码,不会对CPU有什么影响,甚至调整到2ms,也没影响(基本维持在0%占用率)。

下面谈谈各浏览器的兼容性问题,如何获取到正确的高度,主要是对body.scrollHeight和documentElement.scrollHeight两个值得比较。注意本文用的是这个doctype,不同的doctype应该不会影响结果,但是假如你的页面没有申明doctype,那还是先去加一个吧。

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>在主页面追加以下测试代码,以输出这两个值,代码示例:

<div><button οnclick=”checkHeight()”>Check Height</button></div><script type=”text/javascript”>

function checkHeight() {

var iframe = document.getElementById(“frame_content”);

var bHeight = iframe.contentWindow.document.body.scrollHeight;

var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;

alert(“bHeight:” + bHeight + “, dHeight:” + dHeight);

}

</script>被加载页面,可以切换一个绝对定位的层,来使页面高度动态改变。如果层展开,则会撑高页面高度。代码示例:

<div><button οnclick=”toggleOverlay()”>Toggle Overlay</button>

</div>

<div style=”height:160px;position:relative”>

<div id=”overlay” style=”position:absolute;width:280px;height:280px;display:none;”></div>

</div>

<script type=”text/javascript”>

function toggleOverlay() {

var overlay = document.getElementById(‘overlay’);

overlay.style.display = (overlay.style.display == ‘none’) ? ‘block’ : ‘none’;

}

</script>下面列出以上代码在各浏览器的测试值:

(bHeight = body.scrollHeight, dHeight = documentElement.scrollHeight, 红色 = 错误值, 绿色 = 正确值)

/ 层隐藏时 层展开时

bHeight dHeight bHeight dHeight

IE6 184 184 184 303

IE7 184 184 184 303

FF 184 184 184 303

Opera 181 181 300 300

Safari 184 184 303 184

暂且无视Opera比别人少3像素的问题…可以看出,如果没有绝对定位的东西,两个值是相等的,取哪个都无所谓。

但是如果有,那么各个浏览器的表现不太相同,单取哪个值都不对。但可以找到了一条规律,那就是取两个值得最大值可以兼容各浏览器。所以我们的主页面代码就要改造成这样了:

function reinitIframe(){var iframe = document.getElementById(“frame_content”);

try{

var bHeight = iframe.contentWindow.document.body.scrollHeight;

var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;

var height = Math.max(bHeight, dHeight);

iframe.height = height;

}catch (ex){}

}

window.setInterval(“reinitIframe()”, 200);这样子,基本解决了兼容性问题。顺便说下,不光绝对定位的层会影响到值,float也会导致两个值的差异。

如果你演示Demo后,会发现,除了IE,其他浏览器中,当层展开后再隐藏,取到的高度值还是维持在展开的高度303,而非隐藏回去的真正值184,就是说长高了之后缩不回去了。这个现象在不同被包含页面之间做切换也会发生,当从高的页面切换到矮页面的时候,取到的高度还是那个高的值。

可以归纳为,当iframe窗体高度高于文档实际高度的时候,高度取的是窗体高度,而当窗体高度低于实际文档高度时,取的是文档实际高度。因此,要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以,在iframe的添加 οnlοad=”this.height=100″,让页面加载的时候先缩到足够矮,然后再同步到一样的高度。

这个值,在实际应用中决定,足够矮但又不能太矮,否则在FF等浏览器里会有很明显的闪烁。DOM操作的时候主页面无法监听到,只能DOM操作完了之后把高度变小了。

在我的一个实际项目中,在成本和收益之间权衡,我并没有做这个事情,因为每个DOM函数中都要插入这个代码,代价太高,其实层缩回去不缩掉也不是那么致命。包括Demo里,也没有去做这个事情。如果读者有更好的方法,请告诉我。

这是最终的主页面的代码:

<iframe id=”frame_content” src=”iframe_b.html” scrolling=”no” frameborder=”0″ οnlοad=”this.height=100″></iframe>

<script type=”text/javascript”>

function reinitIframe(){

var iframe = document.getElementById(“frame_content”);

try{

var bHeight = iframe.contentWindow.document.body.scrollHeight;

var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;

var height = Math.max(bHeight, dHeight);

iframe.height = height;

}catch (ex){}

}

window.setInterval(“reinitIframe()”, 200);

</script>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/182800.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 对角化可逆矩阵怎么求_正交矩阵一定可逆吗

    对角化可逆矩阵怎么求_正交矩阵一定可逆吗1矩阵对角化方法摘要:本文给出了一种不同于传统方法的矩阵对角化方法,利用矩阵的初等变换,先求出矩阵的特征根与特征向量,接着再判断矩阵是否可对角化。关键词:矩阵特征根特征向量对角化TheMethodsoftheDiagonalizationoftheMatrixgAbstract:Inthispaper,themethodofthediagonalizationoft…

    2022年10月31日
  • R语言入门mac——RStudio安装➕R包安装【附安装链接】[通俗易懂]

    R语言入门mac——RStudio安装➕R包安装【附安装链接】[通俗易懂]R语言入门mac——安装【附安装链接】这里写目录标题R语言入门mac——安装【附安装链接】一、总体安装步骤1安装R2下载RStudio二、R包安装一、总体安装步骤1安装RRStudio需要R3.0.1+下载链接:https://cran.rstudio.com/2下载RStudio下载链接:https://rstudio.com/products/rstudio/download/二、R包安装下面展示r包安装代码rm(list=ls())options()$repos

  • 怎么删除服务项

    怎么删除服务项

  • 详谈双亲委派机制(面试常问)[通俗易懂]

    前言Java虚拟机对class文件采用的是按需加载的方式,也就是说当需要使用该类时才会将它的class文件加载到内存生成class对象,而且,加载某个类的class文件时,Java虚拟机采用的是双亲委派机制,即把请求交由父类处理,它是一种任务委派模式工作原理(1)如果一个类加载器收到了类加载请求,它并不会自己先加载,而是把这个请求委托给父类的加载器去执行(2)如果父类加载器还存在其父类加载器,则进一步向上委托,依次递归,请求最终将到达顶层的引导类加载器;(3)如果父类加载器可以完成类加载任务,就成

  • SecureCRT的下载、安装( 过程非常详细!!值得查看)

    SecureCRT的下载、安装( 过程非常详细!!值得查看)SecureCRT的下载、安装和破解(过程非常详细!!值得查看)简单介绍下SecureCRT一、SecureCRT的下载二、SecureCRT的安装简单介绍下SecureCRTSecureCRT是一款支持SSH(SSH1和SSH2)的终端仿真程序,简单地说是Windows下登录UNIX或Linux服务器主机的软件。SecureCRT支持SSH,同时支持Telnet和rlogin协议。Secu…

  • matlab 折线图 标记_matlab画折线图标记线

    matlab 折线图 标记_matlab画折线图标记线…’MarkerSize’,10)xlabel(‘x’);ylabel(‘y’);·用Matlab画图时,有时候需要对各种图标进行标注,例如,用“+”代表A的运动情况,“*”代表……画出来就成了折线图,请试验之(*);(,’:’,”)同时画两个函数若要改变颜色,在座标对后面加上相关字串即可:;((),”)若要同时改变颜色及图线……是用m…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号