仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1232|回复: 9

[HTML5] html教程之网页制造技能教程:iframe自顺应高度

[复制链接]
小妖女 该用户已被删除
发表于 2015-1-15 22:59:59 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
这不是理想状况。我们必须尽可能把精力放在改善这项规范,把耗费在派系相争的精力降到最低。破洛洛文章简介:大概有人还没打仗到这个成绩过,先申明一下,甚么是自顺应高度吧。所谓iframe自顺应高度,就是,基于界面美妙和交互的思索,埋没了iframe的border和scrollbar,让人看不出它是个iframe。假如iframe一直挪用统一个流动高度的页面,我们间接写逝世iframe高度就能够了。而如
经由过程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

主页面代码示例:

<iframeid="frame_content"src="iframe_b.html"scrolling="no"frameborder="0"></iframe><scripttype="text/javascript">

functionreinitIframe(){

variframe=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,那仍是先往加一个吧。

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">在主页面追加以下测试代码,以输入这两个值,代码示例:

<div><button>CheckHeight</button></div><scripttype="text/javascript">

functioncheckHeight(){

variframe=document.getElementById("frame_content");

varbHeight=iframe.contentWindow.document.body.scrollHeight;

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

alert("bHeight:"+bHeight+",dHeight:"+dHeight);

}

</script>被加载页面,能够切换一个相对定位的层,来使页面高度静态改动。假如层睁开,则会撑高页面高度。代码示例:

<div><button>ToggleOverlay</button>

</div>

<divstyle="height:160px;position:relative">

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

</div>

<scripttype="text/javascript">

functiontoggleOverlay(){

varoverlay=document.getElementById(overlay);

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

}

</script>上面列出以上代码在各扫瞄器的测试值:
(bHeight=body.scrollHeight,dHeight=documentElement.scrollHeight,白色=毛病值,绿色=准确值)

/层埋没时层睁开时
bHeightdHeightbHeightdHeight
IE6184184184303
IE7184184184303
FF184184184303
Opera181181300300
Safari184184303184

临时忽视Opera比他人少3像素的成绩…能够看出,假如没有相对定位的器材,两个值是相称的,取哪一个都无所谓。
可是假如有,那末各个扫瞄器的体现不太不异,单取哪一个值都不合错误。但能够找到了一条纪律,那就是取两个值得最年夜值能够兼容各扫瞄器。以是我们的主页面代码就要改革成如许了:

functionreinitIframe(){variframe=document.getElementById("frame_content");

try{

varbHeight=iframe.contentWindow.document.body.scrollHeight;

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

varheight=Math.max(bHeight,dHeight);

iframe.height=height;

}catch(ex){}

}

window.setInterval("reinitIframe()",200);如许子,基础办理了兼容性成绩。特地说下,不但相对定位的层会影响到值,float也会招致两个值的差别。

假如你演示Demo后,会发明,除IE,其他扫瞄器中,当层睁开后再埋没,取到的高度值仍是保持在睁开的高度303,而非埋没归去的真正值184,就是说长高了以后缩不归去了。这个征象在分歧被包括页面之间做切换也会产生,当从高的页面切换到矮页面的时分,取到的高度仍是谁人高的值。
能够归结为,当iframe窗体高度高于文档实践高度的时分,高度取的是窗体高度,而当窗体高度低于实践文档高度时,取的是文档实践高度。因而,要想举措在同步高度之前把高度设置到一个比实践文档低的值。以是,在iframe的增加onload=”this.height=100&Prime;,让页面加载的时分先缩到充足矮,然后再同步到一样的高度。
这个值,在实践使用中决意,充足矮但又不克不及太矮,不然在FF等扫瞄器里会有很分明的闪灼。DOM操纵的时分主页面没法监听到,只能DOM操纵完了以后把高度变小了。
在我的一个实践项目中,在本钱和收益之间衡量,我并没有做这个事变,由于每一个DOM函数中都要拔出这个代码,价值太高,实在层缩归去不缩失落也不是那末致命。包含Demo里,也没有往做这个事变。假如读者有更好的办法,请告知我。

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

<iframeid="frame_content"src="iframe_b.html"scrolling="no"frameborder="0"></iframe>

<scripttype="text/javascript">

functionreinitIframe(){

variframe=document.getElementById("frame_content");

try{

varbHeight=iframe.contentWindow.document.body.scrollHeight;

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

varheight=Math.max(bHeight,dHeight);

iframe.height=height;

}catch(ex){}

}

window.setInterval("reinitIframe()",200);

</script></p>
就在新标准备受瞩目之际,两大网络监督机构却起冲突。
飘飘悠悠 该用户已被删除
发表于 2015-1-17 20:08:14 | 显示全部楼层
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
冷月葬花魂 该用户已被删除
发表于 2015-1-26 22:39:16 | 显示全部楼层
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
飘灵儿 该用户已被删除
发表于 2015-2-5 05:32:12 | 显示全部楼层
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
谁可相欹 该用户已被删除
发表于 2015-2-11 07:08:55 | 显示全部楼层
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
透明 该用户已被删除
发表于 2015-3-2 00:41:39 | 显示全部楼层
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
山那边是海 该用户已被删除
发表于 2015-3-11 03:52:22 | 显示全部楼层
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
金色的骷髅 该用户已被删除
发表于 2015-3-17 22:08:13 | 显示全部楼层
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
因胸联盟 该用户已被删除
发表于 2015-3-17 22:08:13 | 显示全部楼层
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
精灵巫婆 该用户已被删除
发表于 2015-3-25 07:34:32 | 显示全部楼层
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-3-29 21:05

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表