今天早上有个帖子问有多少人禁用JavaScript。然后我开始想知道可以使用什么技术来确定用户是否禁用了它。
有人知道一些简单的方法来检测JavaScript是否被禁用吗?我的意图是给一个警告，如果浏览器没有启用JS，站点将无法正常运行。
最终，我想把它们重定向到能够在没有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”模式。
其他回答
在主体上使用.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完成时
我认为你可以在noscript标签中插入一个图像标签，并查看你的站点有多少次以及这个图像被加载的频率。
我已经想出了另一种方法使用css和javascript本身。 这只是开始修补类和id。
CSS代码片段: 1. 创建一个css ID规则，命名为#jsDis。 2. 使用"content"属性在BODY元素后生成文本。(你可以按照自己的意愿设置样式)。 3创建第二个css ID规则，命名为#jsEn，并对其进行风格化。(为了简单起见，我给#jsEn规则设置了不同的背景色。
<style>
#jsDis:after {
content:"Javascript is Disable. Please turn it ON!";
font:bold 11px Verdana;
color:#FF0000;
}
#jsEn {
background-color:#dedede;
}
#jsEn:after {
content:"Javascript is Enable. Well Done!";
font:bold 11px Verdana;
color:#333333;
}
</style>
JavaScript代码片段: 1. 创建一个函数。 2. 使用getElementById获取BODY ID并将其分配给一个变量。 3.使用JS函数'setAttribute'，改变BODY元素ID属性的值。
<script>
function jsOn() {
var chgID = document.getElementById('jsDis');
chgID.setAttribute('id', 'jsEn');
}
</script>
HTML部分。 1. 将BODY元素属性的ID命名为#jsDis。 2. 使用函数名添加onLoad事件。(jsOn())。
<body id="jsDis" onLoad="jsOn()">
因为BODY标签的ID是#jsDis: -如果Javascript被启用，它会自己改变BODY标签的属性。 -如果Javascript是禁用的，它将显示css 'content:'规则文本。
你可以使用#包装容器，或者使用任何使用JS的DIV。 希望这有助于理解。
我过去使用的一种技术是使用JavaScript编写一个会话cookie，它只是作为一个标志，表示启用了JavaScript。然后服务器端代码查找此cookie，如果没有找到，则采取适当的操作。当然，这种技术确实依赖于启用cookie !
只是有点难，但是(发型师给了我灵感)
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的解决方案吗?
推荐文章
- src和dist文件夹的作用是什么?
- 防止滚动条增加到Chrome页面的宽度
- 使用图像而不是单选按钮
- jQuery UI对话框-缺少关闭图标
- 如何使用AngularJS获取url参数
- 将RGB转换为白色的RGBA
- 我可以嵌套一个<按钮>元素内< >使用HTML5?
- 如何将“camelCase”转换为“Camel Case”?
- 我们可以在另一个JS文件中调用用一个JavaScript编写的函数吗?
- 如何使用JavaScript重新加载ReCaptcha ?
- 设置TextView文本从html格式的字符串资源在XML
- jQuery。由于转义了JSON中的单引号，parseJSON抛出“无效JSON”错误
- 在JavaScript关联数组中动态创建键
- ReactJS和公共文件夹中的图像
- 在React Native中使用Fetch授权头
