《Web前端开发最佳实践》——3.6 添加JavaScript禁用的提示信息

本节书摘来自华章计算机《Web前端开发最佳实践》一书中的第3章，第3.6节,作者:党　建 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

3.6　添加JavaScript禁用的提示信息

作为Web编程语言，JavaScript使得网页的交互更丰富，用户体验更好。大部分网页都会使用JavaScript开发页面上的一些交互功能。但不幸的是，并不是所有的浏览器都支持JavaScript，比如Kindle内置的浏览器对JavaScript的支持就很弱，并且一般的浏览器也会提供让用户禁用JavaScript的选项。虽然目前JavaScript不起作用的场景很少了，但当JavaScript在浏览器上不起作用时，页面上的某些功能会不能正常工作，这样就影响这些少部分情况下的用户体验。如果开发的模块是个关键的模块，就需要考虑在JavaScript失效时如何让对应的功能正常使用。
最常用的方式是使用< noscript>标签。< noscript>标签就是在当JavaScript被禁用或者不被支持时提供的一种代替方式，即< noscript>标签中的内容会在此时被浏览器解析，作为JavaScript不可用时的备选方案。< noscript>在HTML4中引入，并在HTML5的规范中继续被支持。在HTML4中，< noscript>只在body中起作用，在head中不起作用，但在HTML5中则允许< noscript>出现在head中。相比较HTML4规范中的定义，HTML5规范中的定义提高了< noscript>标签使用的灵活性。
< noscript>标签常规的用法是当JavaScript不可用时显示提示信息。
示例代码：

<script type="text/javascript">
    // 一些操作
</script>
<noscript>
    <p>浏览器不支持JavaScript</p>
</noscript>

从< noscript>的作用来看，这种方式很不灵活，使用上也有一些缺陷：< noscript>标签只支持HTML，不支持XHTML，并且只能作为一个块元素；< noscript>只在JavaScript被禁用时才起作用，在JavaScript因为诸如防火墙拦截等情况下不可用时，并不会起作用；< noscript>也并不能很好地解决JavaScript不可用时网站的可用性问题，尤其是对于大量使用JavaScript及AJAX技术更新页面内容的网站。下面来看看W3C对此的态度，如下是从W3C官网上摘录的一段话：
The noscript element is a blunt instrument. Sometimes, scripts might be enabled, but for some reason the page’s script might fail. For this reason, it’s generally better to avoid using noscript, and to instead design the script to change the page from being a scriptless page to a scripted page on the fly.
大概的意思是说，< noscript>标签不够灵活，有些时候JavaScript不可用并不是因为脚本被禁用导致的。因此，最好是不要使用< noscript>标签，而是更改设计，让页面从无脚本模式过度到有脚本的模式，即从不支持脚本到支持脚本的渐进增强，从而保证两种模式下页面都可用。如下是给出的示例：

<form action="calcSquare.php">
  <p>
    <label for=x>Number</label>:
    <input id="x" name="x" type="number">
  </p>
  <input id="submit" type=submit value="Calculate Square">
  <script>
    var x = document.getElementById('x');
    var output = document.createElement('p');
    output.textContent = 'Type a number; it will be squared right then!';
    x.form.appendChild(output);
    x.form.onsubmit = function () { return false; }
    x.oninput = function () {
      var v = x.valueAsNumber;
      output.textContent = v + ' squared is ' + v * v;
    };
    var submit = document.getElementById('submit');
    submit.parentNode.removeChild(submit);
  </script>
</form>

在该示例中，当JavaScript可用时，在客户端运行JavaScript代码计算输入值的平方值。当JavaScript不可用时，把输入值提交到服务器端来计算输入值的平方值。这个示例很清晰地演示了JavaScript不可用和可用两种模式下，页面渐进增强的设计理念。
从上述示例中可以看出，W3C也意识到了< noscript>的局限性，并给出了推荐的方案。但实际的项目中很少有网站的设计采用这一方案，不过，某新闻网站很好地采用了此方案，网站整体做到了JavaScript脚本启用时的渐进增强设计。图3-3显示网站脚本禁用时的效果。
图3-4是脚本启用时的显示效果，可以看到，当脚本可用时，整个新闻列表按照类型显示并拥有了一个幻灯播放效果。
该网站首先按照静态网页的布局设计了新闻的文字图片列表，然后在如上显示的脚本中按照新闻类别分别添加了类别标题，并构建了新闻的滚动幻灯播放效果，很巧妙地实现了脚本启用时的渐进增强设计。

尽管有上述新闻网站等这样成功的案例，但是在实际的情况中，一般还是很难设计出合理的渐进增强效果，并且在大部分网站的使用过程中JavaScript脚本不可用的情况只占很小的比例，考虑到上述原因，推荐的做法是在技术实现的代价和网站的可用性之间做一个平衡。但可以肯定的是，针对JavaScript被禁用的客户端不做任何相应的设计是不专业的做法，降低了网站的可用性。那么实际的项目中应该如何应对JavaScript不可用的状况呢？
最佳的实践是，提示用户JavaScript已被禁用，并同时提供一个功能简单、不依赖于JavaScript的代替网站供用户继续浏览，做到平稳降级。如在首页中，当脚本不可用时会提示用户，同时会提供一个不依赖于脚本的移动站点作为代替的站点，图3-5给出了浏览器禁用脚本时BBC网站的展示效果。

https://yqfile.alicdn.com/c38ebb000dd61623250e9551f550d521cdbe33dd.png" >

当然，也可以直接跳转到一个不依赖脚本的代替页面中。图3-6是百度首页在禁用脚本时的做法。

https://yqfile.alicdn.com/e2044d5155d04449f10dc07111e829d2e07ff901.png" >

为了做到禁用脚本时页面自动跳转，百度首页中添加了如下的代码：

为了使得页面在脚本不可用时还能正常展示，可能需要针对部分模块设置区别脚本的禁用和启用时页面的不同风格。常用的方式是给页面的HTML标签添加一个名为no-js的class，并在脚本中添加移除此class的逻辑。在样式代码中可以这样设置不同状态下的样式：

/* 脚本启用时对应的样式 */
.product {

}

/* 脚本不可用时，通过覆盖以上定义的样式或者添加额外的样式来设置不同的外观*/
.no-js .product {

}