如何检测JavaScript是否被禁用?

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

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

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

当前回答

人们已经发布了一些例子，这些例子都是很好的检测选项，但是基于你的要求“给出警告，如果浏览器没有启用JS，站点将无法正常运行”。你可以添加一个元素，让它以某种方式出现在页面上，例如当你获得徽章时，在Stack Overflow上弹出相应的消息，然后用一些Javascript删除它，在页面加载时立即运行(我指的是DOM，而不是整个页面)。

2008-09-23 21:54:29

其他回答

更新2022

这个问题已经有30多个答案，但似乎没有一个答案清楚或准确地说明必须做什么。

服务器端框架使用- ASP。网络核心客户端-香草js

在BaseController上，也就是应用的第一个入口点OnActionExecutionAsync上，我有这个逻辑。

基本上默认情况下，我假设客户端没有启用javascript并设置此标志。

Response.Cookies.Append("jsEnabled", "false");

现在，在客户端初始加载后，我有一个javascript函数，将这个标志更新为true。这个函数只有在环境中有javascript时才会运行

完整的解在这里。

客户端

在初始负载上添加此函数

function detectIfJavascriptIsEnabled() {
    // if this function run's which means js is enabled
    var jsEnabled = getCookie('jsEnabled');
    if (jsEnabled === 'false') {
        setCookie('jsEnabled', 'true');
        location.reload();
    }
}

服务器

private bool ValidateIfEnvironmentHasJavascript() {
  if (HttpContext.Request.Cookies != null && HttpContext.Request.Cookies.Count > 0) {
    Boolean.TryParse(HttpContext.Request.Cookies["jsEnabled"], out
      var hasJavascriptEnabled);
    return hasJavascriptEnabled;
  } else {
    Response.Cookies.Append("jsEnabled", "false",
      new CookieOptions() {
        IsEssential = true, Expires = DateTime.UtcNow.AddHours(24)
      });
  }

  return false;
}

这就是得到结果的方法

var environmentHasJavascript = ValidateIfEnvironmentHasJavascript();

2022-01-28 11:46:18

当然，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

noscript块在JavaScript被禁用时执行，通常用于显示你用JavaScript生成的替代内容，例如:

<script type="javascript">
    ... construction of ajaxy-link,  setting of "js-enabled" cookie flag, etc..
</script>
<noscript>
    <a href="next_page.php?nojs=1">Next Page</a>
</noscript>

没有js的用户会得到next_page链接——你可以在这里添加参数，这样你就可以在下一页知道他们是否通过js /非js链接来访问，或者试图通过js设置cookie，如果没有这些就意味着js被禁用了。这两个例子都非常琐碎，可以进行操作，但是您可以理解其中的含义。

如果你想知道有多少用户禁用了javascript，你可以这样做:

<noscript>
    <img src="no_js.gif" alt="Javascript not enabled" />
</noscript>

然后检查您的访问日志，看看这个映像被击中了多少次。这是一个略显粗糙的解决方案，但它将为你的用户基础提供一个很好的百分比。

上面的方法(图像跟踪)不适用于纯文本浏览器或根本不支持js的浏览器，所以如果你的用户群主要倾向于这方面，这可能不是最好的方法。

2008-09-23 14:08:33

Why don't you just put a hijacked onClick() event handler that will fire only when JS is enabled, and use this to append a parameter (js=true) to the clicked/selected URL (you could also detect a drop down list and change the value- of add a hidden form field). So now when the server sees this parameter (js=true) it knows that JS is enabled and then do your fancy logic server-side. The down side to this is that the first time a users comes to your site, bookmark, URL, search engine generated URL- you will need to detect that this is a new user so don't look for the NVP appended into the URL, and the server would have to wait for the next click to determine the user is JS enabled/disabled. Also, another downside is that the URL will end up on the browser URL and if this user then bookmarks this URL it will have the js=true NVP, even if the user does not have JS enabled, though on the next click the server would be wise to knowing whether the user still had JS enabled or not. Sigh.. this is fun...

2009-08-13 21:16:36

为了强制用户启用javascript，我将每个链接的“href”属性设置为相同的文档，这将通知用户启用javascript或下载Firefox(如果他们不知道如何启用javascript)。我将实际链接url存储到链接的“name”属性，并定义了一个全局onclick事件，读取“name”属性并将页面重定向到那里。

这对我的用户基础很有效，虽然有点法西斯;)。

2010-07-26 14:12:58

如何检测JavaScript是否被禁用?

推荐文章

最新文章

标签