本节书摘来自异步社区《JavaScript精粹(修订版)》一书中的第1章,第1.4节,作者:【英】Edwards, J. , 【澳】Adams, C.著,更多章节内容可以访问云栖社区“异步社区”公众号查看
由于以下原因,用户可能会无法使用JavaScript:
他们用的设备根本就不支持脚本,或者仅以某种受限制的方式支持;他们位于代理服务器或者防火墙之后,JavaScript代码被过滤;他们故意禁用了JavaScript。第一种原因的用户很多,而且这些用户还在逐渐增长,包括一些小屏幕设备,如PDA;中等大小屏幕设备,如WebTV和Sony的PSP;还有一些老的不支持JavaScript的浏览器。
也许上面列出的那些用户占用户总数的比例不算很高,但那不重要。不管怎样,一些用户没有JavaScript,但还是需要向他们提供服务。没有什么好的办法来统计这样的用户究竟有多少,因为从服务器端检测客户端对JavaScript的支持是非常不可靠的,不过我曾经看过一个数据,关闭支持JavaScript功能的用户的比例大约是5%~20%,当然,前提是我们把各种搜索引擎的爬虫机器人程序也算成了用户。
方 法一种解决方案就是使用HTML的noscript元素。那么页面内容就可以被所有不支持脚本的浏览器以及被关闭了JavaScript支持的浏览器正确查看。
虽然这也是一个可行的办法,不过在实际操作中不是太有用。因为noscript无法区分浏览器对脚本的支持程度。那些只是部分支持或者受限制地支持JavaScript的浏览器会试图执行比较复杂的脚本,因为它们甚至可能根本就不认识noscript标签,其结果是在这些浏览器中代码会不正常地终止,然后什么也没干。
一个更好的办法是使用静态HTML,然后通过脚本对静态内容进行修改或者增加动态行为。
下面看一个简单例子。这个代码片段是用一个未排序的列表作为主菜单结构,产生一个DHTML菜单。第15章将详细讨论有关内容,不过这个简单的例子在这里可以充分展示我们的方法:
<ul id="menu"> <li><a href="/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/contact/">Contact</a></li> </ul> <script type="text/javascript" src="menu.js"></script>链接的列表是纯HTML,所以对于所有的用户来说,不管使用什么浏览器,都可以正常显示。如果脚本是被支持的,那么menu.js脚本就可以执行动态的操作,但是如果脚本不被支持时,内容仍然会显示。我们没有用什么明确的方法来区分不同浏览器对于JavaScript的支持程度,而只是提供了动态的内容,如果浏览器能够处理,它就会去处理,如果不能,那么只显示静态内容就行了。
这种脚本编写方法叫做渐进式增强,并且这是我们在整本书中所使用的方法。
讨 论传统的方法是,用纯JavaScript代码生成独立的动态菜单,然后用noscript元素提供一个备用的静态的内容:
<script type="text/javascript" src="menu.js"></script> <noscript> <ul> <li><a href="/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/contact/">Contact</a></li> </ul> </noscript>不过,正如前面所说的,这样的代码在很多设备中无效,因为对JavaScript的支持往往不是一个简单的“是或不是”的问题。而这个方法提供了给所有浏览器的默认内容,又提供了一个可能有效的脚本功能。不要提示太多!
不管是这种方法还是noscript元素,都不应该被用来产生这样的消息给用户:“请打开JavaScript选项再继续。”对于某些用户,这种消息有点蛮横(“我干嘛要听你的?”);对于另外一些用户,这种消息可能是无用的(“我压根无法打开!”)或者根本是无意义的(“JavaScript是啥?”)。就像很多启动页面总是说:“请升级您的浏览器”。这种消息对于大多数Web用户而言,就像在路上看到一个牌子,提示:“请换一辆车。”
有时候,开发者可能会碰到除JavaScript之外再无更好的办法来实现功能的情况。这时,我认为用一些静态信息来提示用户网页遇到兼容性问题是合理的(当然,这些和技术无关)。不过,在大多数情况下,应尽量避免显示这种信息,除非它的确有意义而且是必须要告知用户的。
相关资源:敏捷开发V1.0.pptx