提醒：本页面将不再更新、维护或者支持，文章、评论所叙述内容存在时效性，涉及技术细节或者软件使用方面不保证能够完全有效可操作，请谨慎参考！

主流现代浏览器默认都不会禁用js脚本的，但是也有例外，除了用户主动禁用脚本外，还有就是维护模式下的安全浏览，这样会禁用页面上的js脚本。

禁用了脚本会发生什么？哦，JQuery无法使用？准确的说是所有和JavaScript有关的都无法使用。包括你上面曾经引以为豪的特效，比如AJAX、图像延时加载以及本地脚本存储等等。是不是感觉像是回到了原始社会，严重一点可能感觉像是过着盲人的生活，呵呵，不过有一点可以肯定的是未开启脚本的这部分用户少之又少，我们可以抛弃他们。你说什么？抛弃我们的客户？这怎么可以？别急，下面我要介绍的就是针对这部分用户的判断，以便于我们能够优雅的降级页面渲染来优化用户体验。

1. 使用noscript标签

这个标签貌似很久就有了，我记得第一次学习HTML的时候就已经在那儿了。不过那时很少用，见得最多的例子是用在统计代码上面，比如有下面的代码： 

<script src="http://example.com/stat.js"></script>
<noscript>
  <img src="http://example.com/stat_pic.gif"
      border="0" height="0" width="0" />
</noscript>

这段代码有什么作用呢？我来简单的解释一下：首先如果访问这个页面的浏览器开启js脚本功能的话，当然这是大多数情况，这个页面将执行example.com域名下的stat.js脚本代码并探测访问浏览器及客户端的信息，接下来将这些信息计入统计数据库。这个是正常情况。不正常的情况就是用户禁用了脚本，那么标示脚本的script标签将失效，那么stat.js里面的脚本将无法执行，stat.js就不能探测收集访客信息了，如果我们仍然期望获取这个禁用了脚本的访客的信息，这里可以通过一个技巧，那就是noscript标签，访客禁用脚本后，将继续显示noscript标签内的内容，noscript里面一般包含HTML代码，如上述代码所示，我在里面包含了一个引用了stat_pic.gif的img标签，当然这个浏览器会去请求example.com下的stat_pic.gif，这个stat_pic.gif可不是普通的图片，我们将这个图片ReWrite到一段可执行的ASP或者PHP服务器脚本上，那么就可以探测请求stat_pic.gif的客户端一些基本信息了。肯定有人会问，为什么我们不直接用stat_pic.gif，我前面也提到，只能探测基本信息，如果服务端和客户前端js结合起来，那么跟踪到的信息就更多了，比如像浏览器宽度等等。这里就是一例优雅降级的例子：如果客户端开启脚本，那么服务端配合前端脚本收集更多的统计信息，这个是最好的情况。如果客户端禁用了脚本，我们也不能放弃这个客户端，那么就由服务端收集基本的访问信息，这样两种情况都考虑到了。

呵呵，说了这么多，其实这是noscript的一种应用场景吧。大部分情况下noscript可以用来引导用户开启javascript： 

<noscript>
<p>
您好，您的浏览器禁用了脚本，为了保障浏览效果，
本页面采用了大量的脚本，建议你采取下面的步骤开启脚本功能：
</p>
<p>（IE/Chrome/FireFox/Opera等主流浏览器开启脚本的方法，此处略）</p>
</noscript>

另外noscript还有一种用法可以介绍一下，最初我是在淘宝页面布局上看到的，比如有如下HTML5布局： 

<footer>
 <p>我是页脚</p>
</footer>

footer标签是HTML5新引入的，也就是说老式浏览器不认识这个标签，如果使用这些标签对于老式浏览器是非常不友好的，甚至这些浏览器都不能识别，比如说IE6~8系列的，一般解决办法是通过设置CSS的block，这里是设置footer为display:block，然后再通过JavaScript脚本createElement来创建这些元素： 

<style>
  footer {
    display:block;
  }
</style>
<script>
  document.createElement("footer");
</script>
<footer>
 <p>我是页脚</p>
</footer>

上面这个例子我简写了，按要求style标签要放到header里面并且最好加上type。HTML5标签就那么几个，CSS到没什么，JS要写这么多document.createElement吗？当然不必这样，我们可以引用html5shiv的html5.js来达到同样的效果，可以参考我之前的文章 《使用JavaScript脚本框架实现HTML5+CSS3网页兼容》 。

好了，扯了这么多，下面切入正题吧：假如用户这时禁用了脚本会怎么样，很显然CSS的block依然有作用，但是JavaScript算是废了，那么对于采用支持HTML5新技术浏览器到没什么，但是对于老式浏览器来说，这些HTML5标签算是无法识别了，也就不能被正确的渲染了，淘宝上的做法是这样的： 

<noscript><div id="footer"></noscript>
<footer>
 <p>我是页脚</p>
</footer>
<noscript></div></noscript>

看到这里，大家应该明白，这时采取外部套用老式div标签来保障禁用了脚本的老式浏览器正确渲染，当然我们还需要设置div#footer的CSS样式，不过针对于老式浏览器而言的，新的支持HTML5浏览器原生支持这些标签，所以可以不用这个Wrapper啦，我在这里定义老式浏览器为IE6~8： 

<!--[if lte IE 8]>
<noscript><div id="footer"></noscript>
<![endif]-->
<footer>
 <p>我是页脚</p>
</footer>
<!--[if lte IE 8]>
<noscript></div></noscript>
<![endif]-->

不晓得这里加的是什么？没关系，可以移步 《CSS设置样式时区分不同版本IE的办法》 来了解IE下条件注释的相关资料。

2. 使用Modernizr脚本

部分描述参考 《使用JavaScript脚本框架实现HTML5+CSS3网页兼容》 ，关于noscript介绍的蛮多的了，下面介绍一下这个脚本框架：这是个HTML5和CSS3的特性检测器，它能自动检测浏览器是否支持相应的特性并且还能将不支持特性的某些class样式符加上前缀no-。然后定义这些带no-前缀的CSS样式来实现优雅的降级。当然我这里还是介绍关于判断客户端禁用脚本的情况，我们编写HTML的时候可以在顶部的html设置class为no-js： 

<!DOCTYPE html>
<html class="no-js">
<head>
</head>
<body></body>
</html>

然后引用Modernizr脚本，Modernizr会在执行的情况下将no-js改成js。这样我们分别可以通过.no-js和.js来定义脚本有效或者无效的情况了。这个脚本有很多功能还是蛮强大的，这里就不介绍了。

3. 自定义脚本

Modernizr脚本太大？或者有很多功能我们不需要，也许我们仅仅需要判断脚本是否有效这么简单，也许下面的脚本能够帮助你： 

//replace nojs class with js on html element
(function(html) {
  html.className = html.className.replace(/\bno\-js\b/,'js');
})(document.documentElement);

看脚本应该能够猜得出什么功能，这个是实现了Modernizr将no-js改成js这一项子功能而已，代码简短，而且不需要引用Modernizr脚本库，其实这个是我在苹果（Apple）网站页面代码上看到的，不过其正则是将nojs改成js，我做了下修改，以便于兼容Modernizr库。

好了，就介绍这么多，欢迎交流！