WEB学习笔记8-添加javascript禁用的提示

最常用的方式是使用<noscript>标签，此标签就是当javascript被禁用或者不被支持的时候提供一种代替方式，即<noscript>标签的内容会在此时被浏览器解析，作为javascript不可用时的备选方案。

此标签的常规用法就是当javascript不可用时显示提示信息。

<script type="text/javascript">

//一些操作

</script>

<noscript>

<p>浏览器不支持javascript</p>

</noscript>

但是<noscript>标签不够灵活，有些时候javascript不可用并不是因为脚本被禁用导致，因此最好不要使用<noscript>标签，而是更改设计，让页面从无脚本模式过度到有脚本模式。即从不支持脚本到支持脚本的渐进增强，从而保证两种模式下页面都可用。

<from action ="calcSquare.php">

<p>

<lable for x>Number</lable>:

<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 numeber ;it will be squared right then!';

x.form.appendChild(output);

x.form.onsubmint=function(){return false};

x.output=function(){

var v=x.valueAsNumber;

output.textContent=v+'squared is '+v*v;

};

var submit=document.getElementById('submint');

submit.parentNode.removeChild(submit);

</script>

</form>

一般很难设计出合理的渐进增强效果。最佳做法是提示用户javascript已经被禁用，并同时提供一个功能简单，不依赖javascript的代替网站供用户继续浏览做到平稳的降级，也可以直接跳转到一个不依赖脚本的代替页面中。

例如百度首页添加了如下的代码

<noscript><meta http-equiv="refresh" content="0";url=/baidu.html from=noscript"/></noscript>

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

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

.product{

}

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

.no-js.product{

}