今天早上有个帖子问有多少人禁用JavaScript。然后我开始想知道可以使用什么技术来确定用户是否禁用了它。

有人知道一些简单的方法来检测JavaScript是否被禁用吗?我的意图是给一个警告,如果浏览器没有启用JS,站点将无法正常运行。

最终,我想把它们重定向到能够在没有JS的情况下工作的内容,但我需要这个检测作为一个占位符来开始。


当前回答

在主体上使用.no-js类,并基于.no-js父类创建非javascript样式。 如果javascript被禁用,你会得到所有的非javascript样式, 如果有JS支持,.no- JS类将被替换,像往常一样提供所有的样式。

 document.body.className = document.body.className.replace("no-js","js");

通过modernizr在HTML5样板http://html5boilerplate.com/中使用的技巧,但你可以使用一行javascript来替换类

Noscript标签是可以的,但是为什么在你的HTML中有额外的东西,当它可以用CSS完成时

其他回答

只是有点难,但是(发型师给了我灵感)

CSS:

.pagecontainer {
  display: none;
}

JS:

function load() {
  document.getElementById('noscriptmsg').style.display = "none";
  document.getElementById('load').style.display = "block";
  /* rest of js*/
}

HTML:

<body onload="load();">

  <div class="pagecontainer" id="load">
    Page loading....
  </div>
  <div id="noscriptmsg">
    You don't have javascript enabled. Good luck with that.
  </div>

</body>

在任何情况下都是可行的,对吧? 即使noscript标签不受支持(只需要一些CSS) 有人知道非CSS的解决方案吗?

<noscript>甚至不是必需的,更不用说在XHTML中不受支持了。

工作的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
    <title>My website</title>
    <style>
      #site {
          display: none;
      }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js "></script>
    <script>
      $(document).ready(function() {
          $("#noJS").hide();
          $("#site").show();
      });
    </script>
</head>
<body>
    <div id="noJS">Please enable JavaScript...</div>
    <div id="site">JavaScript dependent content here...</div>
</body>
</html>

在本例中,如果启用了JavaScript,则可以看到站点。如果没有,则会看到“请启用JavaScript”消息。测试JavaScript是否启用的最好方法是简单地尝试和使用JavaScript!如果它工作,它被启用,如果没有,那么它不是…

您会想看一下noscript标记。

<script type="text/javascript">
...some javascript script to insert data...
</script>
<noscript>
   <p>Access the <a href="http://someplace.com/data">data.</a></p>
</noscript>

我过去使用的一种技术是使用JavaScript编写一个会话cookie,它只是作为一个标志,表示启用了JavaScript。然后服务器端代码查找此cookie,如果没有找到,则采取适当的操作。当然,这种技术确实依赖于启用cookie !

这是我使用的“最干净”的解决方案:

<noscript>
    <style>
        body *{ /*hides all elements inside the body*/
            display: none;
        }
        h1{ /* even if this h1 is inside head tags it will be first hidden, so we have to display it again after all body elements are hidden*/
            display: block;
        }
    </style>
    <h1>JavaScript is not enabled, please check your browser settings.</h1>
</noscript>