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

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

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


当前回答

如果你的用例是你有一个表单(例如,一个登录表单),你的服务器端脚本需要知道用户是否启用了JavaScript,你可以这样做:

<form onsubmit="this.js_enabled.value=1;return true;">
    <input type="hidden" name="js_enabled" value="0">
    <input type="submit" value="go">
</form>

这将在提交表单之前将js_enabled的值更改为1。如果服务器端脚本得到0,则没有JS。如果它得到1,JS!

其他回答

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的浏览器,所以如果你的用户群主要倾向于这方面,这可能不是最好的方法。

您会想看一下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>

我要在这里加上。02。虽然不是百分百防弹,但我觉得已经足够了。

对我来说,问题是,在我喜欢的例子中,提出一些“没有Javascript,这个网站不能很好地工作”的信息,然后你需要确保你的网站在没有Javascript的情况下也能正常工作。一旦你开始走上这条路,你就会开始意识到,关闭JS后,网站应该是防弹的,这是一大块额外的工作。

所以,你真正想要的是“重定向”到一个页面,上面写着“打开JS,傻瓜”。但是,当然,你不能可靠地做元重定向。所以,我的建议是:

<noscript>
    <style type="text/css">
        .pagecontainer {display:none;}
    </style>
    <div class="noscriptmsg">
    You don't have javascript enabled.  Good luck with that.
    </div>
</noscript>

...你站点中的所有内容都是用一个div类“pagcontainer”来包装的。noscript标签内的CSS将隐藏所有页面内容,而不是显示你想要显示的任何“无JS”消息。这实际上是Gmail所做的…如果它对谷歌来说足够好,它对我的小网站来说就足够好了。

如果你的用例是你有一个表单(例如,一个登录表单),你的服务器端脚本需要知道用户是否启用了JavaScript,你可以这样做:

<form onsubmit="this.js_enabled.value=1;return true;">
    <input type="hidden" name="js_enabled" value="0">
    <input type="submit" value="go">
</form>

这将在提交表单之前将js_enabled的值更改为1。如果服务器端脚本得到0,则没有JS。如果它得到1,JS!

当然,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”模式。