DHTML,标准和浏览器兼容性

分享于 

22分钟阅读

Web开发

  繁體 雙語

本文由James编写,最初发布在开发人员软件日志的2005年08月 发行版中。 你可以在网站找到更多文章。

介绍

作为Web开发人员,可以通过集成使用 JavaScript。级联样式表( CSS ) 和HTML来丰富Web应用程序的交互性。 尽管这些技术在所有Web浏览器供应商中都非常严重,但是构建一个丰富的交互式Web应用程序仍然十分挑战。 本文介绍开发交互式HTML接口所涉及的一些常见挑战,以及如何解决这些问题的一些想法。 我们将研究开发高度交互式Web界面的一些基本问题,然后重点研究如何利用面向标准的代码。 我们还将讨论一些如何尝试和编写与新兴标准相兼容的代码的一些想法。

DHTML的挑战

这个术语经常用来描述 HTML。JavaScript和CSS技术的混合。 它还可以引用网页的特性,这会导致使用JavaScript操作HTML内容或者CSS样式。 实际上,DHTML ( 请参见 ) 有几个定义。 实际上,准确定义DHTML的问题可能会对实现它的挑战有一定的了解。 当你扫描DHTML的每个定义时,很明显它们都是相同的,但有些则比它的他方面更详细。 很明显,对DHTML的概念有细微的不同解释。 可以能很难找到一个对DHTML所有的描述,同样也很难在每个浏览器上编写一个DHTML解决方案。 在本文中,重点关注如何通过标准遵从性来解决这个问题,但是首先要提出一些它的他基本问题。

还有一个挑战是将客户端DHTML与服务器端系统集成,这通常是应用程序逻辑实现的地方。 对DHTML的承诺使你能够重新检查服务器端内容传递系统和脚本语言,例如 PHP。perl/mason。 客户端JavaScript在交付演示文稿时占有更加活跃的角色,必须在定义服务器端端口和客户端表达层。 最大的缺点是,在开发人员的典型Web工具包中,没有一种容易从JavaScript函数中检索数据的方法。 实际上,当客户端 JavaScript UI变得更高级时,重新加载页面可能是一个重大的。 确实有几种方法可以实现远程脚本,但是目前还没有基于标准的方法。 从用户界面设计的角度来说,DHTML也很有挑战性。 DHTML的目标之一是提供开发基于web的应用程序的方法,这些应用程序模拟基于桌面的应用程序的丰富。 但是,网页用户界面设计和桌面软件设计之间存在根本的区别: 基于web的软件并没有几乎相同的设计约定和准则。 人们依赖熟悉UI约定来了解他们所使用的软件的形式期望。 如果你以前从未使用过特定桌面程序,你可能仍然希望保存菜单,然后在 icon 下单击鼠标右键,以发现更多相关的上下文命令。 不幸的是,这些约定并不经常存在于网络上。 网站上没有文件菜单的通用概念,也没有任何菜单。 相反,我们留下了关于如何与应用程序交互的不同概念。 当使用复杂的Web应用程序时,用户通常需要在学习它之前更大的初始投资。 免费的DHTML有时只会加剧这个问题。

现在,我们对实现DHTML的问题有了很好的了解。 首先,Web浏览器支持不一致。 第二,它需要与应用程序( 例如。你的PHP脚本用于打印简单的HTML,但现在它必须管理所有的JavaScript和它的他DHTML文件。)的表示层进行更复杂的交互。 第三,由于缺少用户界面指导,设计成功的dhtml界面很困难。 但是,你可以在满足用户需求的基础上创建一个丰富的。满意的dhtml解决方案。

了解听众

在解决浏览器兼容性问题时,首先要考虑的是谁将使用你的应用程序。 这是企业内部网的应用程序? 或者你的应用程序可以在互联网上获得大容量? 是否有可以通过浏览器和版本将流量分解到站点的服务器日志报表? 如果你知道浏览器将被使用,那么你可以用你的用户环境设计你的应用程序。

但是,你可能无法预测你的用户将拥有哪些浏览器。 在这种情况下,可以通过查看Web浏览器的总体使用率和市场共享来获得用户环境的概念。 从本文开始,Web OneStat.com 和圣地亚哥等Web的网络分析公司报告说,微软的IE 使用率和 92.9 % 市场份额分别为 88.9 % 和3。 在浏览器中,这听起来非常流行,但在半年的时间内,考虑onestat调查显示了 IE的使用率下降了1 %,而WebSideStory报告了 2.6个月的市场份额。 IE 主导地位的主要原因是 Mozilla Firefox 越来越流行。 因为 Firefox 在特性和安全性改进中有很好的插件,所以它也做了一个适合于DHTML程序员的标准平台。

遵循标准

一方面,网络是一个平台无关的天堂。 在任何操作系统上,你可以构建一个应用程序,它将立即分发给用户,并且它可以运行在没有任何特殊的。 至少这样我们才会到达那里。 但是为了实现这一承诺,浏览器需要实现一个标准的DHTML版本。 导致标准化的方式是全球互操作委员会,世界宽带联盟( W3C )。 其中,组织负责开发dhtml相关技术的标准规范。 W3C虽然礼貌地认可了 DHTML,但是他们并没有在他们的技术文献中正式使用这个术语。 相反,他们为 HTML ( 包括 XHTML,与HTML等价的XML )。CSS和文档对象模型( DOM ) 维护了几个规范和技术报告。 对于一个网络程序员来说,DOM技术报告是最有趣的。 W3C描述DOM作为一个"接口that允许程序和脚本动态访问和更新文档的内容。结构和样式。 xml描述了在Web页面中操作Web页面元素的标准 JavaScript API,如DOM核心和 DOM HTML建议中所描述的一样。 DOM的一个关键特性是,当你操作网页的任何基础数据时,它立即生效。 这与传统Web编程不同,为了更新页面上的某些数据,需要对服务器进行一个请求。 使用 DOM,网页上的数据可以使用JavaScript即时更新。 你可以能仍然需要将用户操作的final 结果发送到服务器,但同时还可以创建一个更加令人兴奋的经验。 清单 1包含了使用DOM和无所不在的getElementById() 函数的非常简单的说明。

清单 1.使用DOM的简单说明
<spanid="myId">Hi</span><br/><ahref="javascript:updateText( 'Hello World' )">Hello World</a><scriptlanguage="javascript"type="text/javascript">function updateText( newText ) {
 var elem = document.getElementById( "myId" );
 elem.innerHTML = newText;
}</script>

本示例简单地更新 <span> 通过更新 block,使用 Hello World <span> 对象属性的innerHTMLinnerHTML 属性被W3C废弃,但它提供了一个非常直接的DOM使用示例。 innerHTML 是一个函数的示例,它是级别 0的一部分。 W3C在为DOM提出建议之前,已经在为HTML文档定义标准的JavaScript API,而大部分( 但当然不是全部) 都符合业界标准JavaScript规范,称为ecma脚本。 w3c建议正式发布之前,Web浏览器中几乎普遍支持的JavaScript函数和属性是grandfathered的第1 级( 第2 级)。 基于xml的级别 DOM函数通常用于 跨浏览器 兼容脚本,但与 innerHTML 一样,它可能不会成为进一步的W3C建议,因此在新的浏览器中不一定保证使用。

标准头痛

HTML。CSS和DOM标准应该保存由各种Web浏览器供应商为网络浏览器充分充分使用的兼容性问题。 实际上,对于它们的最大部分,但并不意味着它总是容易实现它们。 它也并不意味着网络浏览器统一支持所有的标准。

在所有的目标浏览器平台上,DHTML程序员都不断地面临需要实现一个不支持的功能。 你必须支持用户环境中的旧浏览器,或者用户环境中的现代浏览器不能统一实现 API。 但是如果有遗嘱的话。 让我们看一个例子,这个例子是如何围绕所有最新浏览器不均匀支持的W3C-recommended机制的。

不透明度:弥补不一致的api

对网页的一个非常平滑的效果是通过操纵页面元素的不透明度来实现的。 在页面元素( 如图像或者文本 block ) 中指定不透明度值,可以实现透明效果。 如果你随着时间操作不透明度,你甚至可以实现一个的。 在各种浏览器( 比如 Firefox。IE 和 Safari ) 上都支持不透明度的操作。 缺点是这些浏览器都实现了不透明度。 然而,我们仍然可以编写一些相对干净的JavaScript代码,可以在所有不同类型的浏览器上实现不透明度。 在本例中,我们将编写一个JavaScript函数,将文本的block 淡入。

我们将从文本 block的HTML开始,我们将淡出它。 注意外部的显示样式 <div> 容器设置为 none,默认情况下它将不可见。 我们将包括几个链接,当单击时,将执行我们将写入的JavaScript函数,以显示或者隐藏 <div> block ( 见清单 2 )。

清单 2.显示并隐藏 <div> block 示例
<ahref="javascript:show( 'fadeInBlock' )">Show</a><ahref="javascript:hide( 'fadeInBlock' )">Hide</a><divid="fadeInBlock"style="display:none; border=1px solid #666666;
 background-color:#DADADA; width:95%; height=12"><pstyle="margin:5; font-weight:bold">This text is fading fading fading in.</p></div>

现在,让我们来看看 show()hide() 函数是如何实现的。 首先你会注意到,两个函数都以 id 属性作为参数。 每个函数都将使用我们最喜欢的getElementById 方法来访问 <div> block hide() 函数非常简单。 它只是需要确保将显示样式设置回 noneshow() 函数保持在相当高的水平,但是它给我们一个很好的轮廓来解决问题。 它首先确保浏览器支持不透明度的操作。 如果是,我们最初将不透明度设置为零,使它完全透明,这样我们就可以安全地将显示样式设置为 block。 一旦显示器处于 block 模式,我们可以调用一个函数,逐渐增加不透明度直到它为( 清单 3 )。

清单 3。逐渐增加透明度
<script language="javascript" type="text/javascript">function show( id ) {
 var elem = document.getElementById( id );
 if( supportsOpacity( elem )) {
 // first set 0% opacity to make it completely transparent setOpacity( elem, 0 );
 // when we set display ="block" it's still invisible elem.style.display = "block";
 // call the function to gradually increase opacity fadeIn( id );
 } else {
 // can't modify opacity, so just make it visible... elem.style.display = "block";
 }
}function hide( id ) {
 var elem = document.getElementById( id );
 elem.style.display="none";
}
</script>

show() 函数调用了我们需要实现的三个函数: supportsOpacity()setOpacity()fadeIn()。 现在,我们将看到三种不同的浏览器如何有三种不同的不透明度( 清单 4 )。 从 supportsOpacity() 函数开始,我们看到用于确定是否实现 encodeURIComponent的同一技术,通过检查不透明样式的。 Mozilla和 Firefox 支持 MozOpacity 样式,而 IE 使用过滤器实现不透明度。 此外,Safari还支持 opacity 风格。 后者是opacity的W3C标准,但是只有Safari和 Opera 做了很好的支持。 在这里,如果目标元素( 在本例中),IE 只能支持不透明度,这也可以能值得注意。 <div> block ) 具有 heightwidth 样式属性。 这与微软定义过滤器的方式有关。

清单 4.支持不透明度的三种不同方法
<script language="javascript" type="text/javascript">function supportsOpacity( el ) {
 if ( el.style.opacity!= undefined )
 returntrue;
 if( el.style.MozOpacity!= undefined )
 returntrue;
 if ( el.style.filter!= undefined )
 returntrue;
 returnfalse;
}function setOpacity( el, opaciLevel ) {
 if ( el.style.opacity!= undefined ) {
 el.style.opacity = opaciLevel;
 } elseif( el.style.MozOpacity!= undefined ) {
 el.style.MozOpacity = opaciLevel;
 } elseif ( el.style.filter!= undefined ) {
 var oplvl = Math.round(opaciLevel*100);
 el.style.filter="alpha(opacity=" + oplvl + ")";
 }
}function fadeIn( id, currentOpacity ) {
 var counterLimit = 20;
 var el = document.getElementById( id );
 if(!currentOpacity ) {
 currentOpacity = 1;
 }
 if( currentOpacity> counterLimit ) {
 return;
 }
 setOpacity( el, ( currentOpacity/counterLimit ) );
 currentOpacity++;
 var func = "fadeIn( '" + id + "'," + currentOpacity + ")";
 window.setTimeout( func, 50);
}
</script>

以我们的supportsOpacity 函数的方式评估附件会告诉我们这种风格是否存在,即使不是定义的不透明样式。 如果不透明度样式中存在任何一种,我们认为浏览器支持它。 接下来,除了这个函数实际上将一个值设置为 opacity 属性之外,setOpacity() 使用相同的逻辑。 除了 requiring MozOpacity between和样式属性接受相同的值,在 opacity 和之间的浮点值需要一个比较麻烦的语法,而"筛选器"的值是 100. 如果使用1 毫秒时间间隔,则 fadeIn() 函数使用 setTimeout() 方法调用自身 20次,每次增加不透明度为1 分之一。

希望大多数JavaScript代码可以编写,这样可以利用不同浏览器的共同性。 但是就像这个例子展示的,有时你需要考虑浏览器实现等价函数的方式的差异。 如果必须编写条件不同的JavaScript代码,则通常使代码具有特定的方法或者属性的定义。 考虑以下 setOpacity() 函数( 见清单 5 )的可选实现。

尽管这样的代码可以能与它的他实现有相同的结果,但是可能会导致浏览器成熟。 首先,它将 IE 和Mozilla锁定为他们对不透明度的特殊支持。 一旦发布 Firefox 或者 IE 支持标准 opacity 属性,就不想使用该机制,因为不会使用不透明的标准方法。 这里外,由于同一浏览器的不同版本在支持的特性中不同,你必须考虑版本号才能使浏览器检查。 而且,特别是 IE,在不同平台上的行为可能不同。 例如最新版本 IE的版本很少或者根本没有DOM支持。 正如你能想象在你的代码,保持所有这一切将会变得相当笨拙,难以维持。 而且你永远不会让你的代码在更新的浏览器中停止工作。 最直接的技术是检查要使用的方法或者属性,然后优先生成,以便在特定的方法和属性之前。 另外,考虑使用高级包装器函数( 如 setOpacity() ) 来计算特定浏览器API的细节。 然后,至少使用包装器函数的代码可以保持浏览器独立。

清单 5.setOpacity() 函数的替代实现
function setOpacity( el, opaciLevel ) {
 // assume getBrowserType returns"moz","ie","safari" or"opera" thisBrowser = getBrowserType(); 
 if( thisBrowser == "moz" ) {
 el.style.MozOpacity = opaciLevel;
 } elseif (thisBrowser == "ie" ) {
 var oplvl = Math.round(opaciLevel*100);
 el.style.filter="alpha(opacity=" + oplvl + ")";
 } elseif ((thisBrowser == "safari") 
 || (thisBrowser == "opera")) {
 el.style.opacity = opaciLevel;
 }
}

远程脚本:领先于标准的一步

当甚至最新版本的流行网页浏览器似乎是 behind 标准DOM的一个步骤,这是令人遗憾的。 更糟糕的是,in是一个步骤 behind,你真正希望在Web应用程序中实现的特性。 远程脚本,或者使用客户端JavaScript访问服务器上的数据而不重新加载页面,可以能是没有标准支持的最佳例子。

Web成为标准的一部分,浏览器供应商使用自己的DOM扩展来响应需求,通过公开类似于XMLHTTP请求API的一些东西。 甚至可以找到一个开源JavaScript库,它实现了 Sarissa库中的一个通用接口,该接口由 Emmanuil Batsis编写。 我们的setOpacity 示例一样,Sarissa负责所有浏览器特定的细节,并为远程脚本提供高级 API。

但是,在任何浏览器实现XMLHTTP请求API之前,纯JavaScript技术都被用来执行远程脚本。 虽然不能使用JavaScript来从服务器访问数据,但是通过智能使用 DOM,你可以仿真 JavaScript。 performing脚本库( jsr ) 是使用Brett编写的JavaScript远程脚本库,它是最广泛使用的JavaScript库之一,它由开放源码许可协议( )。 简而言之,它通过使用DOM创建 inline 框架来对RPC进行处理。 inline 框架有一个 src 服务器端脚本的属性。 当 inline 帧加载时,客户端脚本可以访问其中包含的数据。

象Sarissa和that这样的项目表明,即使不存在特定功能的标准支持,也可以将它的合并。 通过利用它的他人工作或者实现你自己的接口,仍然可以实现 跨浏览器 兼容性。

结束语

Web浏览器在实现标准化的DHTML相关技术时出了巨大的步骤,但我们已经看到了实现DHTML解决方案的大量挑战。 但是,事情从这里变得更好,因为标准遵从性更加严重,像 Firefox 这样的新浏览器开始摇摆。 最重要的是,如果你在设计DHTML应用程序时,可以节省大量时间和工作,从而开始。 尝试利用目标浏览器的通用性。 但是如果你面临协调不同的浏览器 api,那么尝试更高级别的隐藏浏览器特定细节的功能。

资源

请确保查看以下资源以获取浏览器兼容的DHTML的深度信息:

  • 动态 HTML: Definitive的权威参考,O'Reilly。
  • MozillaDOM?

COM  STA  bro  STAN  standard  兼容性  
相关文章