本条值,在实质上选拔中决定,丰盛矮但又不可能太矮,不然在FF等浏览器里会有很明显的闪耀。DOM操作的时候主页面非常的小概监听到,只可以DOM操作完了之后把高度变小了。

即便您演示德姆o后,会意识,除了IE,其余浏览器中,当层张开后再掩瞒,取到的高度值依然维持在开展的冲天303,而非隐瞒回去的真正值184,正是说长高了后来缩不回去了。这一个场景在差别被含有页面之间做切换也会爆发,当从高的页面切换成矮页面包车型大巴时候,取到的惊人依旧老大高的值。

functionreinitIframe(){variframe=document.getElementById("frame_content");try{iframe.height=iframe.contentWindow.document.documentElement.scrollHeight;}catch{}}window.setInterval",200);
ToggleOverlayfunctiontoggleOverlay(){varoverlay=document.getElementById;overlay.style.display=(overlay.style.display=='none')?'block':'none';}

被加载页面,能够切换贰个纯属定位的层,来使页面高度动态退换。如果层开展,则会撑高页面中度。代码示例:

在代码维护角度思考,方法二是特惠方法一的,因为方法一,各类被含有页都要去引进一段相似的代码来做那么些事情,成立了不胜枚举别本。

只要在主窗口做二个Interval,不停的来得到被含有页的万丈,然后做一道,是还是不是即方便,又解决了JS操作DOM的标题了啊?答案是任其自然的。

附带说下,iframe在无语的时候才去用,它会给前端开采带来太多的劳动。

下边谈谈各浏览器的宽容性难点,怎么着取得到正确的中度,主要是对body.scrollHeight和documentElement.scrollHeight七个值得相比较。注意本文用的是以此doctype,不一样的doctype应该不会听得多了就能说的详细结果,可是一旦你的页面未有表达doctype,那依旧先去加叁个啊。

自家做了测量检验,同时开几个窗口实行这么些代码,不会对CPU有怎么着震慑,以致调节到2ms,也没影响。

functionreinitIframe(){variframe=document.getElementById("frame_content");try{varbHeight=iframe.contentWindow.document.body.scrollHeight;vardHeight=iframe.contentWindow.document.documentElement.scrollHeight;varheight=Math.max;iframe.height=height;}catch{}}window.setInterval",200);

措施二,在主页面iframe的onload事件中实践JS,去赢得被含有页的万丈内容,然后去联合中度。

functionreinitIframe(){variframe=document.getElementById("frame_content");try{varbHeight=iframe.contentWindow.document.body.scrollHeight;vardHeight=iframe.contentWindow.document.documentElement.scrollHeight;varheight=Math.max;iframe.height=height;}catch{}}window.setInterval",200);

守旧做法差不离有多个:

能够综合为,当iframe窗体中度抢先文档实际中度的时候,中度取的是窗体高度,而当窗体高度低于实际文书档案高度时,取的是文书档案实际高度。因而,要想艺术在联合签字中度从前把中度设置到二个比实际文书档案低的值。所以,在iframe的增进onload=”this.height=100″,让页面加载的时候先缩到丰盛矮,然后再同台到均等的冲天。

在主页面追加以下测量检验代码,以出口那多少个值,代码示例:

CheckHeightfunctioncheckHeight(){variframe=document.getElementById("frame_content");varbHeight=iframe.contentWindow.document.body.scrollHeight;vardHeight=iframe.contentWindow.document.documentElement.scrollHeight;alert("bHeight:"+bHeight+",dHeight:"+dHeight);}

对于iframe的接受,今后要比原先用的越来越少了,不经常会用在调用外界模块项目中,举例二个体系中,要调用外人的登录分界面只怕直接使用和呈现别的网站提供的数据等等,那么iframe自适应高度的难题就来了,先前一向被那一个主题素材烦懑,所以昨天想享受一下艺术和工夫,希望能帮到我们。

下边列出以上代码在各浏览器的测量检验值:

办法一,在各类被含有页在自身内容加载达成之后,推行JS获得本页面包车型大巴可观,然后去一齐父页面的iframe中度。

五个章程都只管理了静的东西,正是只在情节加载的时候推行,如若JS去操作DOM引起的冲天变化,都不太低价。

近期无视Opera比人家少3像素的难点…能够观望,若无断然定位的东西,四个值是格外的,取哪个都无所谓。可是假如有,那么各类浏览器的显现不太一致,单取哪个值都不对。但能够找到了一条规律,那便是取多少个值得最大值能够相配各浏览器。所以我们的主页面代码将在退换成这么了:

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

(bHeight=body.scrollHeight,dHeight=documentElement.scrollHeight,红色=错误值,绿色=正确值)/层隐藏时层展开时bHeightdHeightbHeightdHeightIE7+184184184303FF184184184303Opera181181300300Safari184184303184

一向实践,功用会不会有题目?

在自家的一个实际项目中,在资金和低收入之间权衡,小编并未做那个专门的学问,因为各样DOM函数中都要插入这些代码,代价太高,其实层缩回去不缩掉亦非那么致命。满含德姆o里,也绝非去做那个业务。假如读者有更加好的法门,请报告自身。那是终极的主页面包车型客车代码:

所谓iframe自适应中度,正是,基于分界面雅观和人机联作的考虑,隐蔽了iframe的border和scrollbar,令人看不出它是个iframe。借使iframe始终调用同叁个定位中度的页面,大家一向写死iframe中度就能够了。而只要iframe要切换页面,也许被含有页面要做DOM动态操作,那个时候,就须要程序去联合iframe高度和被含有页的莫过于中度了。

那标准,基本缓和了包容性难题。顺便说下,不光相对定位的层会影响到值,float也会引致七个值的分裂。

相关文章

网站地图xml地图