如何检测JavaScript是否被禁用?

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

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

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

当前回答

因为我总是想给浏览器一些有价值的东西，我经常使用这个技巧:

首先，页面中任何需要JavaScript才能正常运行的部分(包括通过getElementById调用等修改的被动HTML元素)都被设计成可用的，假设没有可用的JavaScript。(设计得好像它不存在一样)

任何需要JavaScript的元素，我在标签中放置如下内容:

<span name="jsOnly" style="display: none;"></span>

然后在文档的开头，使用.onload或document。在getElementsByName('jsOnly')的循环中设置.style。Display = "";重新打开JS依赖的元素。这样，非JS的浏览器就不需要看到站点中依赖于JS的部分，如果他们拥有它，它会在准备就绪时立即显示出来。

一旦您习惯了这种方法，就很容易混合您的代码来处理这两种情况，尽管我现在只是在试验noscript标记，并期望它会有一些额外的优点。

2010-07-16 13:53:02

其他回答

当然，cookie和HTTP报头是很好的解决方案，但两者都需要显式的服务器端参与。

对于简单的网站，或者我没有后端访问，我更喜欢客户端解决方案。

我使用下面的代码为HTML元素本身设置一个class属性，这样我的CSS就可以处理几乎所有其他显示类型逻辑。

方法:

1)将<script>document.getElementsByTagName('html')[0]. classlist .add('js-enabled');</script>放在<html>元素之上。

警告! ! ! ! 这个方法，将覆盖所有<html>类属性，更不用说可能不是“有效”的html，但在所有浏览器中都可以工作，我已经测试过了。

*注意:由于脚本运行的时间，在<html>标记被处理之前，它最终得到一个没有节点的空classList集合，所以在脚本完成时，<html>元素将只给出您添加的类。

2)保留所有其他<html>类属性，只需将script <script>document.getElementsByTagName('html')[0]. classlist .add('js-enabled');</script>放在<html>标签后面。

在这两种情况下，如果JS被禁用，则不会对<html>类属性进行任何更改。

选择

这些年来，我使用了其他一些方法:

    <script type="text/javascript">
    <!-- 
        (function(d, a, b){ 
            let x = function(){
                // Select and swap
                let hits = d.getElementsByClassName(a);
                for( let i = hits.length - 1; i >= 0; i-- ){
                    hits[i].classList.add(b);
                    hits[i].classList.remove(a);
                }
            };
            // Initialize Second Pass...
            setTimeout(function(){ x(); },0);
            x();
        })(document, 'no-js', 'js-enabled' );
    -->
</script>

//简化为:

<script type="text/javascript">
    <!-- 
        (function(d, a, b, x, hits, i){x=function(){hits=d.getElementsByClassName(a);for(i=hits.length-1;i>=0;i--){hits[i].classList.add(b);hits[i].classList.remove(a);}};setTimeout(function(){ x(); },0);x();})(document, 'no-js', 'js-enabled' );
    -->
</script>

这将在页面中循环两次，一次在页面中它所在的位置，通常在<html>和再次页面加载后。需要两次，因为我注入了一个头。一个CMS的tpl文件，我没有后端访问，但想为no-js片段提供样式选项。

第一步，将设置.js启用的类，允许任何全局样式生效，并阻止大多数进一步的回流。第二步，是所有后来包含的内容的总称。

推理:

主要原因是，我关心是否启用JS是为了“样式化”的目的，隐藏/显示一个表单，启用/禁用按钮或重新设置滑块、表格和其他需要JS“正确”运行的表示和布局，如果没有JS来动画或处理交互，将是无用或不可用的。

此外，你不能直接用javascript检测，如果javascript被“禁用”…只有当它是“启用”时，通过执行一些javascript，所以你要么依赖<meta http-equiv="refresh" content="2;url=/url/to/no-js/content.html" />，要么你可以依靠CSS来切换样式，如果javascript执行，切换到“启用js”模式。

2020-06-19 18:10:31

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

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的解决方案吗?

2010-12-08 23:36:06

我认为你可以在noscript标签中插入一个图像标签，并查看你的站点有多少次以及这个图像被加载的频率。

2008-09-23 14:14:32

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

<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>

2015-04-02 14:04:23

我建议您反过来编写不引人注目的JavaScript。

使您的项目的功能为禁用JavaScript的用户工作，当您完成后，实现您的JavaScript ui增强。

https://en.wikipedia.org/wiki/Unobtrusive_JavaScript

2008-09-23 14:12:54

如何检测JavaScript是否被禁用?

推荐文章

最新文章

标签