收 藏 投 稿 繁 体 RSS 
站长吧-中国站长学习与交流的网站
首 页 运 营 学 院 建 站 论 坛
Web master8.net  
 网站运营  
  欢迎在本站发布信息，在线投递稿件请点这里。编辑QQ:4908220，欢迎联系交流。
业界动态 创业故事 推广研究 策划盈利 电子商务 企业平台
  站长工具
SEO查询 Whois查询 Pr查询 域名查询 IP查询 网页编辑器
 建站服务  
  如有建站意向，请尽快联系我们，以便安排时间... 建站服务 QQ4908220 QQ:4908220
作品展示 服务范围 服务流程 服务报价 联系方式 付款方式
文章正文  » 您的当前位置： 首页 >> 学院 >> 网页设计 >> HTML
编写跨浏览器的DHTML应用程序
  来源：互联网 | 时间：2005-10-04 | 浏览：   相关评论 | 报告错误 | 发布文章
【字号：大 | 中 | 小】 【背景色 杏仁黄 秋叶褐 胭脂红 芥末绿 天蓝 雪青 灰 银河白(默认色) 】
本文介绍了IE和Navigator两种浏览器对DHTML标准实现的差异，特别是如何编写Navigator中运行的DHTML程序。 

　　DHTML(Dynamic HTML)是W3C组织提出的一种新的规范，它对原有的HTML做了许多扩充，并结合Javascript，使得静态的HTML页面产生了许多动态效果，例如菜单的展开和收起，页面元素的外观动态改变等。IE 4.0以上，Navigator 4.0以上的版本都支持这个标准。但是，不同的浏览器厂家对它都做了不同程度的扩充。以最流行IE的和NS为例，IE的实现更接近于W3C的方案，而NS，说实话，与W3C的方案差异很大，而且并没有完全实现，甚至可以说是另一套方案。笔者在初识DHTML时，按照书上讲的编写了几个小程序，在IE上一试就通，而在NS上可以说费尽了周折才逐渐找到解决方案。由于市面上很少有讲述NS的DHTML实现方案的书(大概NS由于的实现不符合标准)，而真正的商业网站至少应同时支持IE和NS这两种主要的浏览器，我愿意把我的一些心得写出来与大家共享，使大家不必再走我走过的弯路。对于二者的实现相同的部分，本文作一简略介绍，您若有兴趣可参考有关书籍或网上资源。 

　　DHTML实际上由三两部分组成：CSS(Cascade Style Sheet，级联样式表)，层(Layer)和Javascript。 

　　所谓CSS，概念上类似于C++中的类，在类定义中指明元素的外观样式，如字体，颜色，大小等等，页面中的任何一个HTML元素如被指定属于这个类，就自动拥有该类的特性；还可以为某种HTML元素定义样式，这样页面中的所有这种元素都有了同样的外观。如果将这样的样式定义存在一个单独的.css文件中(就象C++那样将类定义存在 .h文件中)，再在页面中将其包含进来，则一个网站的所有页面就有了同样的外观。IE和NS对CSS的实现基本相同，在此就不再详细介绍了。 

　　两者的差异主要体现在层的实现上。所谓层，就是页面上的一块区域，其中可以包含任何的HTML元素，通过改变层的属性，其间的元素可以跟着出现，消失，更改，移动等。 在IE中，层依靠<DIV></DIV>和<SPAN></SPAN>来实现，两者基本相同，通常<DIV>用于较大的层，<SPAN>用于较小的层，并且<DIV>在实现的层后面加上一个回车换行，而<SPAN>不加。它的语法如下(二者相同)： 

　　<div id=layername style="style definition">Layer content</div> 或 
　　<div id=layername class="classname">Layer content</div> 

　　其中style definition是一组有分号隔开的样式定义，常用的有以下几种： 
　　position：其值可以为absolute和relative，所谓absolute(绝对定位)，就是层的内容不必按照出现的先后次序在浏览器上依次排列，而是可以像素为单位定位到浏览器用户区域的任意位置；而relative(相对定位)则是层按照相邻的内容依次排列。 

　　left，top，width，height：指层的左上角坐标以及它的宽度和高度。 
　　z-index：由于层可以被放置在页面的任何位置，当它与其它内容重合时，z-index值大的显示在上面，所有层的z-index值为1。但是在NS中，所有的表单元素(文本框，列表框，按钮等)，只要是可见的就无法被遮住，而无论z-index值是多少。因此在设计页面时，要注意不要使动态出现或隐藏的元素(例如弹出式菜单)的位置上放置表单元素。 
　　Visibility：指明层是否可见，通过在程序中动态改变这个值，可以实现层的出现和消失，比如下拉菜单就要依靠它来实现。它的三个候选值为：inherit，可见性与父元素的可见性相同；visible，可见(在NS中是show)；hidden，不可见(在NS中是hide)。 
　　NS同样支持这两个标记，但是支持得很不好，经常出现一些莫名其妙的错误，我想这可能是出于策略上的考虑，而不见得是NS的产品质量不好。NS引入了另两个标记，<layer>和<ilayer>，<layer>用于绝对定位，<ilayer>用于相对定位，因此在这两个标记的样式定义中没有position属性。 
　　两个浏览器对层的不同实现体现在以下几点： 
　　1. 层的引用。在IE中，页面上的每个可编程元素(不仅是层，还包括其它任何指明了ID值的元素，详见下文)都是document.all集合的一项；而在NS中，页面中每个层，无论是用上面四个标记中的哪个定义的，也无论是绝对或是相对定位，都是document.layers集合的一项。因此，若想引用名为layer1的层，应以如下语法： 
　　IE：document.all["layer1">或document.all.layer1 
　　NS：document.layers["layer1">或document.layers.layer1 
　　2. 层的坐标和大小。在IE中，每个涉及层的外观的属性，如位置，大小，颜色等，都是层的style属性集合的以一项，如层的左上角x坐标为document.all.layer1.style.pixelLeft，y坐标为　　document.all.layer1.style.pixelTop，宽度为document.all.layer1.style.pixelWidth，高度为document.all.layer1.style.pixelHeight。还有几组属性如scrollxxx，offsetxxx，clientxxx，其中xxx为Left，Top，Width，Height ，分别描述层的滚动，位移，客户区等属性，详见MSDN中关于坐标的描述。而在NS中，每个层都有一个clip属性集，x，y，width，height是这个集的集合元素。 
　　另外，IE中所有元素拥有同一个坐标系，无论它位于层外或层内；在NS中，每个层都有一个独立的坐标系。 
　　3. 层的内容。IE中的层包含innerHTML和outerHTML属性(由于并非描述层的外观，所以它们不是style属性集的元素，而是层的属性)，其含义如下： 
　　innerHTML：层中的HTML代码，但是不包括层的定义。 
　　outerHTML：层中的HTML代码，且包括层的定义。 
　　改变这些属性值就可以改变层的内容，如下语句改变层layer1的内容为加粗的字符串"layer1"：document.all.layer1.innerHTML=”layer1” ，而在NS中，每一个document.layers集合中的元素，即一个层，都NS被视为一个独立的窗口，有独立document属性，就象Javascript中的document属性一样，通过调用document.write函数，可以动态改变层的内容。上例在NS中应修改为： 
　　document.layers.layer1.document.open(); 
　　doucment.layers.layer1.write("<div>layer1</div>"); 
　　document.layers.layer1.document.close; 
　　同样，对于层中的其它可编程元素，例如图象，其引用语法如下：document.layers.layer1.document.images[imgname>，而如果该图象位于层的外面，其语法应为document.images[imgname>，而在IE中，无论图象位于层内或层外，其语法都是后者。 
　　Javascript是Netscape公司首先提出的一种客户端编程的脚本语言，随后有扩展到服务器端。它的语法和概念都类似于C++，但是没有C++那样严格。IE同样支持客户端Javascript(微软还推出了类似的，功能更强大的Vbscript，但是NS却不支持)。两种浏览器对Javascript的基本实现是一样的，但是又都对它做了许多不同的扩展，而在DHTML编程中，很多情况下都需要用到这些扩展。由于此时已经没有标准可遵循，二者已经看不出有相同之处。例如，浏览器的客户区的宽度，在IE中是document.body.clientWidth，在NS中是window.innerWidth；再比如你想知道用户按浏览器的滚动条滚动了多少像素，在IE中是document.body.scrollTop，在NS中是window.pageYOffset。在这种情况下，你只能查阅二者的文档。IE的Javascript文档包含在MSDN中，也可以到微软的站点上单独下载。NS的Javascript文档可以到 http://developer.netscape.com上下载，那里也能得到NS的DHTML文档。 
　　NS没有实现的功能。 
　　1.IE中，页面中的任何元素都是可编程的，只要赋予它ID属性，其语法如下： 
　　<div id=itemid>content</div>或<span id=itemid>content</span> 
　　而在NS中，除非元素位于层中，否则无法对它编程。 
　　2.IE中增添了元素的渐变(Transition)和滤镜(Filter)效果，NS中没有。 
　　3.IE中支持客户端的数据绑定(Data bind)，即页面中的某个元素(例如表格中的一个格)可以与服务器端的数据库的某个字段绑定，在数据内容不变的情况下，可以不必再次访问数据库而改变页面的形式(例如按某个字段重新排序)。NS同样没有实现这种特性。 
　　以上列举了二者的如此之多的差别，那我们如何编写跨浏览器的DHTML页面呢？一种方法是编写两个独立的页面，而在入口文件中根据浏览器的不同而重定向到不同的页面，如： 
　　<HTML><BODY> 
　　<Script Language="Javascript"> 
　　isNS=(navigator.appName=="Netscape"); 
　　if (isNS) 
　　 window.location="ns.html"; 
　　else 
　　 window.location="ie.html"; 
　</Script> 
　</BODY></HTML> 

　　这种方法简单，页面整洁，缺点是有很大冗余，毕竟一个页面中程序是少量的，大部分静态内容在两个浏览器中并没有区别，一旦静态的内容发生改变必须在两个页面中一起更改，而且当包含DHTML的页面增多时，每一个页面都需要三个页面来实现，增大了维护的负担。 

　　另一种方法是在同一个页面中集成两个浏览器的代码。在每一个实现特定功能的函数中都根据浏览器的不同分别写代码，如： 
　　<HTML><BODY> 
　　<Script Language="Javascript"> 
　　isNS=(navigator.appName=="Netscape"); 
　　function fun1(){ 
　　if (isNS) 
　　 //NS codes here 
　　else 
　　 //IE codes here 
　　} 
　　</Script> 
　　</BODY></HTML> 
　　对于HTML代码也不同的部分，可以利用Javascript函数 document.writeln()来实现，例如对于层的定义，可以如下实现： 
　　<Script Language="Javascript"> 
　　 if(isNS) 
　　 document.writeln("<layer id="layer1" left=20 top=30 width=40 height=50 z-index=2>"); 
　　 else 
　　 document.writeln("<div id="layer1" style="position:absolute;left:20;top:30;width:40;height:50;z-index:2">"); 
　　</Script> 
　　Layer content here 
　　<Script Language="Javascript"> 
　　 if(isNS) 
　　 document.writeln("</layer>"); 
  　 else 
　　 document.writeln("</div>");
　　</Script> 

　　这种实现方法维护简单，缺点是失去了页面编辑器所见即所得的特性(因为只有到运行时才能将层的定义写入浏览器，在编辑阶段它们只是些Javascript程序)，调整层的坐标和大小都比较困难。在实际编程中可以先按一种浏览器的定义写，待调整完毕后再将它转成另一种定义。但总的来说，这种办法适合对HTML标准比较熟悉的开发人员。
master8
  • 上一篇：HTML中的框架
  • 下一篇：万维网创始人博客处女秀
    		•

    我要投稿　 打印本文　 推荐本文　 加入收藏　 返回顶部　 关闭窗口
    搜模板(www.somoban.com) 原创网站模板交易平台
    阿里妈妈再掀疯狂采购风，网站广告位严重告急，急召天下站长
    基于PHP+MySQL的整站、模块、插件开发等或者按需求实现相应功能; 基于各PHP主流建站系统CMS,BBS,BLOG等的模板定制,完全手写代码; 整站数据迁移或备份恢复;网页代码优化、重构;整站常规SEO优化;网站技术支持; 点击了解详情...
    站长论坛
    • 验证码: