如何检测浏览器是否禁用JavaScript 及<noscript>下CSS清屏适配实现

方案1：完全不使用<noscript>标签实现检测与提示 #

实现逻辑：页面默认渲染无JS提示内容，JS正常运行时自动隐藏提示、显示正常功能内容，不需要依赖<noscript>标签，也不会出现样式冲突。

CSS代码 #

/* JS启用后才生效的原有页面样式 */
body.js-enabled {
  background-color: #200;
}
/* 无JS提示默认样式，确保可读性 */
.no-js-tip {
  padding: 30px;
  font-size: 18px;
  background: #fff;
  color: #000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
/* JS可用时才显示的内容默认隐藏 */
.js-only {
  display: none;
}
body.js-enabled .js-only {
  display: block;
}
/* JS可用时隐藏无JS提示 */
body.js-enabled .no-js-tip {
  display: none;
}

JS代码 #

// 页面加载后立即给body添加JS启用标识，优先级最高避免闪烁
document.body.classList.add('js-enabled');

function test()
{
  alert("you are using javascript!");
}

HTML代码 #

<!-- 无JS提示，默认显示 -->
<div class="no-js-tip">You liar! You don't have JavaScript!</div>
<!-- 仅JS启用时显示的功能内容 -->
<div class="js-only">
  <input type="button" value="Click Me with JavaScript" onClick="test()">
</div>

方案2：保留<noscript>标签，解决样式覆盖问题 #

如果要继续使用<noscript>标签，直接在标签内部嵌入样式覆盖原有页面样式即可，仅在JS禁用时生效：

原有CSS代码（无需修改） #

body
{
  background-color:#200;
}

原有JS代码（无需修改） #

function test()
{
  alert("you are using javascript!");
}

修改后的HTML代码 #

<input type="button" value="Click Me with JavaScript" onClick="test()">

<noscript>
  <!-- 仅JS禁用时生效的样式，覆盖原有样式保证可读性 -->
  <style>
    body {
      background: #fff !important;
      color: #000 !important;
    }
  </style>
  You liar! You don't have JavaScript!
</noscript>

内容的提问来源于stack exchange，提问作者user16826598