今天早上有个帖子问有多少人禁用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”模式。
其他回答
当然，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”模式。
对于那些只想跟踪js是否被启用的人，如何使用ajax例程来存储状态?例如，我将所有访问者/访问记录在一组表中。JSenabled字段可以设置为默认值FALSE，如果启用了JS, ajax例程会将其设置为TRUE。
例如，您可以使用document之类的东西。Location = 'java_page.html'将浏览器重定向到一个新的脚本加载页面。重定向失败意味着JavaScript不可用，在这种情况下，您可以求助于CGI程序或在标记之间插入适当的代码。(注意:NOSCRIPT仅在Netscape Navigator 3.0及更高版本中可用。)
信贷 http://www.intranetjournal.com/faqs/jsfaq/how12.html
为了强制用户启用javascript，我将每个链接的“href”属性设置为相同的文档，这将通知用户启用javascript或下载Firefox(如果他们不知道如何启用javascript)。我将实际链接url存储到链接的“name”属性，并定义了一个全局onclick事件，读取“name”属性并将页面重定向到那里。
这对我的用户基础很有效，虽然有点法西斯;)。
我想添加我的解决方案，以获得可靠的统计数据，有多少真正的用户访问我的网站与javascript禁用的总用户。每节课只检查一次，有以下好处:
访问100个页面或仅访问1个页面的用户每人算1个。这允许只关注单个用户，而不是页面。 不打破页面流，结构或语义在任何方式 可以记录用户代理的日志。这允许排除机器人统计，如谷歌机器人和bing机器人通常有JS禁用!也可以记录IP，时间等… 每个会话只检查一次(最小的过载)
我的代码使用PHP, mysql和jquery与ajax，但可以适应其他语言:
在你的数据库中创建一个像这样的表:
CREATE TABLE IF NOT EXISTS `log_JS` (
`logJS_id` int(11) NOT NULL AUTO_INCREMENT,
`data_ins` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
`session_id` varchar(50) NOT NULL,
`JS_ON` tinyint(1) NOT NULL DEFAULT '0',
`agent` varchar(255) DEFAULT NULL,
PRIMARY KEY (`logJS_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
在使用session_start()或等效(jquery必需)后将此添加到每个页面:
<? if (!isset($_SESSION["JSTest"]))
{
mysql_query("INSERT INTO log_JS (session_id, agent) VALUES ('" . mysql_real_escape_string(session_id()) . "', '" . mysql_real_escape_string($_SERVER['HTTP_USER_AGENT']). "')");
$_SESSION["JSTest"] = 1; // One time per session
?>
<script type="text/javascript">
$(document).ready(function() { $.get('JSOK.php'); });
</script>
<?
}
?>
像这样创建页面JSOK.php:
<?
include_once("[DB connection file].php");
mysql_query("UPDATE log_JS SET JS_ON = 1 WHERE session_id = '" . mysql_real_escape_string(session_id()) . "'");
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
