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

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

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


你可以使用一个简单的JS代码片段来设置隐藏字段的值。当发布回来时,你知道JS是否被启用。

或者你可以尝试打开一个弹出窗口,然后迅速关闭(但可能是可见的)。

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


在什么地方发现它?JavaScript ?那是不可能的。如果只是为了记录日志,可以使用某种跟踪方案,其中每个页面都有JavaScript,将对一个特殊资源(可能是一个非常小的gif或类似的文件)发出请求。这样,您就可以获取唯一页面请求和跟踪文件请求之间的差异。


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

如果javascript被禁用,您的客户端代码将无法运行,所以我假设您的意思是您希望该信息可用的服务器端。在这种情况下,noscript就没那么有用了。相反,我有一个隐藏的输入,并使用javascript填充一个值。在你的下一个请求或回发后,如果值在那里,你知道javascript是打开的。

注意像noscript这样的事情,第一次请求可能显示javascript被禁用,但以后的请求会打开它。


我过去使用的一种技术是使用JavaScript编写一个会话cookie,它只是作为一个标志,表示启用了JavaScript。然后服务器端代码查找此cookie,如果没有找到,则采取适当的操作。当然,这种技术确实依赖于启用cookie !


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

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

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


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


我假设您正在决定是否交付javascript增强的内容。最好的实现能够干净地降级,因此站点在没有JavaScript的情况下仍然可以运行。我还假定您指的是服务器端检测,而不是出于某种无法解释的原因使用<noscript>元素。

没有执行服务器端JavaScript检测的好方法。作为一种替代方法,可以使用JavaScript设置一个cookie,然后在后续的页面视图中使用服务器端脚本测试该cookie。然而,这并不适合决定要传递什么内容,因为它无法区分没有cookie的访问者与新访问者或不接受JavaScript集cookie的访问者。


例如,您可以使用document之类的东西。Location = 'java_page.html'将浏览器重定向到一个新的脚本加载页面。重定向失败意味着JavaScript不可用,在这种情况下,您可以求助于CGI程序或在标记之间插入适当的代码。(注意:NOSCRIPT仅在Netscape Navigator 3.0及更高版本中可用。)

信贷 http://www.intranetjournal.com/faqs/jsfaq/how12.html


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


如果你的用例是你有一个表单(例如,一个登录表单),你的服务器端脚本需要知道用户是否启用了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标记工作得很好,但是需要每个额外的页面请求来继续提供无用的JS文件,因为noscript本质上是一个客户端检查。

你可以用JS设置一个cookie,但正如其他人指出的那样,这可能会失败。理想情况下,您希望能够检测到JS客户端,并且不使用cookie,为该用户设置会话服务器端,以指示是否启用JS。

A possibility is to dynamically add a 1x1 image using JavaScript where the src attribute is actually a server side script. All this script does is saves to the current user session that JS is enabled ($_SESSION['js_enabled']). You can then output a 1x1 blank image back to the browser. The script won't run for users who have JS disabled, and hence the $_SESSION['js_enabled'] won't be set. Then for further pages served to this user, you can decide whether to include all of your external JS files, but you'll always want to include the check, since some of your users might be using the NoScript Firefox add-on or have JS disabled temporarily for some other reason.

您可能希望将此检查包含在接近页面末尾的位置,以便额外的HTTP请求不会减慢页面的呈现速度。


这是为我工作:它重定向访问者如果javascript被禁用

<noscript><meta http-equiv="refresh" content="0; url=whatyouwant.html" /></noscript>

在meta noscript内部添加刷新不是一个好主意。

因为noscript标签不符合XHTML 属性值“Refresh”是非标准的,不应该使用。“刷新”将页面的控制权从用户手中夺走。使用“刷新”将导致W3C的Web内容可访问性指南失败 ——参考http://www.w3schools.com/TAGS/att_meta_http_equiv.asp。


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


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

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

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

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

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

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


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

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


我要在这里加上。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所做的…如果它对谷歌来说足够好,它对我的小网站来说就足够好了。


对于那些只想跟踪js是否被启用的人,如何使用ajax例程来存储状态?例如,我将所有访问者/访问记录在一组表中。JSenabled字段可以设置为默认值FALSE,如果启用了JS, ajax例程会将其设置为TRUE。


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

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


将此添加到每页的HEAD标记。

<noscript>
        <meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
</noscript>

所以你有:

<head>
    <noscript>
        <meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
    </noscript>
</head>

感谢杰。


我昨天解决了同样的问题,所以我在这里加上。001。解决方案对我来说很有效至少在主页(index。php)

我希望根文件夹中只有一个文件:index.php。然后我使用文件夹来组织整个项目(代码,css, js等)。所以index.php的代码如下:

<head>
    <title>Please Activate Javascript</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 
</head>

<body>

<script language="JavaScript">
    $(document).ready(function() {
        location.href = "code/home.php";
    });   
</script>

<noscript>
    <h2>This web site needs javascript activated to work properly. Please activate it. Thanks!</h2>
</noscript>

</body>

</html>

希望这对大家有所帮助。致以最亲切的问候。


您不会检测用户是否禁用了javascript(服务器端或客户端)。相反,你假设javascript是禁用的,并建立你的网页与javascript禁用。这消除了对noscript的需要,无论如何都应该避免使用noscript,因为它不能很好地工作,而且是不必要的。

例如,只要建立你的网站说<div id="nojs">这个网站没有JS就不能工作

然后,脚本将简单地执行document.getElementById('nojs').style。Display = 'none';并继续其正常的JS业务。


使用我在这里介绍的纯服务器端解决方案检查cookie,然后使用Jquery删除cookie来检查javascript。Cookie,然后检查Cookie,这种方式你检查Cookie和javascript


在主体上使用.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完成时


在某些情况下,倒着做就足够了。使用javascript添加一个类:

// Jquery
$('body').addClass('js-enabled');

/* CSS */
.menu-mobile {display:none;}
body.js-enabled .menu-mobile {display:block;}

这可能会在任何复杂的事情上产生维护问题,但对于某些事情来说,这是一个简单的修复。而不是试图检测它什么时候没有加载,只是根据它加载的时候样式。


也许听起来很奇怪,但你可以试一试:

<?php $jsEnabledVar = 0; ?>    

<script type="text/javascript">
var jsenabled = 1;
if(jsenabled == 1)
{
   <?php $jsEnabledVar = 1; ?>
}
</script>

<noscript>
var jsenabled = 0;
if(jsenabled == 0)
{
   <?php $jsEnabledVar = 0; ?>
}
</noscript>

现在在整个页面中使用'$jsEnabledVar'的值。你也可以用它来显示一个块,告诉用户JS被关闭了。

希望这能有所帮助


一个常见的解决方案是将元标记与noscript结合起来刷新页面,并在JavaScript被禁用时通知服务器,如下所示:

<!DOCTYPE html>
<html lang="en">
    <head>
        <noscript>
            <meta http-equiv="refresh" content="0; /?javascript=false">
        </noscript>
        <meta charset="UTF-8"/>
        <title></title>
    </head>
</html>

在上面的例子中,当JavaScript被禁用时,浏览器将在0秒内重定向到网站的主页。此外,它还会向服务器发送参数javascript=false。

然后,服务器端脚本(如node.js或PHP)可以解析该参数,并知道JavaScript已禁用。然后,它可以向客户端发送一个特殊的非javascript版本的网站。


我想添加我的解决方案,以获得可靠的统计数据,有多少真正的用户访问我的网站与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()) . "'");

我已经想出了另一种方法使用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。 希望这有助于理解。


下面是一个PHP脚本,它可以在生成任何输出之前包含一次。它不是完美的,但在大多数情况下,它工作得足够好,以避免交付客户端不会使用的内容或代码。标题注释解释了它是如何工作的。

<?php
/*****************************************************************************
 * JAVASCRIPT DETECTION                                                      *
 *****************************************************************************/

// Progressive enhancement and graceful degradation are not sufficient if we
// want to avoid sending HTML or JavaScript code that won't be useful on the
// client side.  A normal HTTP request will not include any explicit indicator
// that JavaScript is enabled in the client.  So a "preflight response" is
// needed to prompt the client to provide an indicator in a follow-up request.
// Once the state of JavaScript availability has been received the state of
// data received in the original request must be restored before proceding.
// To the user, this handshake should be as invisible as possible.
// 
// The most convenient place to store the original data is in a PHP session.
// The PHP session extension will try to use a cookie to pass the session ID
// but if cookies are not enabled it will insert it into the query string.
// This violates our preference for invisibility.  When Javascript is not
// enabled the only way to effect a client side redirect is with a "meta"
// element with its "http-equiv" attribute set to "refresh".  In this case
// modifying the URL is the only way to pass the session ID back.
//
// But when cookies are disabled and JavaScript is enabled then a client side
// redirect can be effected by setting the "window.onload" method to a function
// which submits a form.  The form has a "method" attribute of "post" and an
// "action" attribute set to the original URL.  The form contains two hidden
// input elements, one in which the session ID is stored and one in which the
// state of JavaScript availability is stored.  Both values are thereby passed
// back to the server in a POST request while the URL remains unchanged.  The
// follow-up request will be a POST even if the original request was a GET, but
// since the original request data is restored, the containing script ought to
// process the request as though it were a GET.

// In order to ensure that the constant SID is defined as the caller of this
// script would expect, call session_start if it hasn't already been called.
$session = isset($_SESSION);
if (!$session) session_start();

// Use a separate session for Javascript detection.  Save the caller's session
// name and ID.  If this is the followup request then close the caller's
// session and reopen the Javascript detection session.  Otherwise, generate a
// new session ID, close the caller's session and create a new session for
// Javascript detection.
$session_name = session_name();
$session_id = session_id();
session_write_close();
session_name('JS_DETECT');
if (isset($_COOKIE['JS_DETECT'])) {
    session_id($_COOKIE['JS_DETECT']);
} elseif (isset($_REQUEST['JS_DETECT'])) {
    session_id($_REQUEST['JS_DETECT']);
} else {
    session_id(sha1(mt_rand()));
}
session_start();

if (isset($_SESSION['_SERVER'])) {
    // Preflight response already sent.
    // Store the JavaScript availability status in a constant.
    define('JS_ENABLED', 0+$_REQUEST['JS_ENABLED']);
    // Store the cookie availability status in a constant.
    define('COOKIES_ENABLED', isset($_COOKIE['JS_DETECT']));
    // Expire the cookies if they exist.
    setcookie('JS_DETECT', 0, time()-3600);
    setcookie('JS_ENABLED', 0, time()-3600);
    // Restore the original request data.
    $_GET = $_SESSION['_GET'];
    $_POST = $_SESSION['_POST'];
    $_FILES = $_SESSION['_FILES'];
    $_COOKIE = $_SESSION['_COOKIE'];
    $_SERVER = $_SESSION['_SERVER'];
    $_REQUEST = $_SESSION['_REQUEST'];
    // Ensure that uploaded files will be deleted if they are not moved or renamed.
    function unlink_uploaded_files () {
        foreach (array_keys($_FILES) as $k)
            if (file_exists($_FILES[$k]['tmp_name']))
                unlink($_FILES[$k]['tmp_name']);
    }
    register_shutdown_function('unlink_uploaded_files');
    // Reinitialize the superglobal.
    $_SESSION = array();
    // Destroy the Javascript detection session.
    session_destroy();
    // Reopen the caller's session.
    session_name($session_name);
    session_id($session_id);
    if ($session) session_start();
    unset($session, $session_name, $session_id, $tmp_name);
    // Complete the request.
} else {
    // Preflight response not sent so send it.
    // To cover the case where cookies are enabled but JavaScript is disabled,
    // initialize the cookie to indicate that JavaScript is disabled.
    setcookie('JS_ENABLED', 0);
    // Prepare the client side redirect used when JavaScript is disabled.
    $content = '0; url='.$_SERVER['REQUEST_URI'];
    if (!$_GET['JS_DETECT']) {
        $content .= empty($_SERVER['QUERY_STRING']) ? '?' : '&';
        $content .= 'JS_DETECT='.session_id();
    }
    // Remove request data which should only be used here.
    unset($_GET['JS_DETECT'],$_GET['JS_ENABLED'],
            $_POST['JS_DETECT'],$_POST['JS_ENABLED'],
            $_COOKIE['JS_DETECT'],$_COOKIE['JS_ENABLED'],
            $_REQUEST['JS_DETECT'],$_REQUEST['JS_ENABLED']);
    // Save all remaining request data in session data.
    $_SESSION['_GET'] = $_GET;
    $_SESSION['_POST'] = $_POST;
    $_SESSION['_FILES'] = $_FILES;
    $_SESSION['_COOKIE'] = $_COOKIE;
    $_SESSION['_SERVER'] = $_SERVER;
    $_SESSION['_REQUEST'] = $_REQUEST;
    // Rename any uploaded files so they won't be deleted by PHP.  When using
    // a clustered web server, upload_tmp_dir must point to shared storage.
    foreach (array_keys($_FILES) as $k) {
        $tmp_name = $_FILES[$k]['tmp_name'].'x';
        if (move_uploaded_file($_FILES[$k]['tmp_name'], $tmp_name))
            $_SESSION['_FILES'][$k]['tmp_name'] = $tmp_name;
    }
// Have the client inform the server as to the status of Javascript.
?>
<!DOCTYPE html>
<html>
<head>
    <script>
        document.cookie = 'JS_ENABLED=1';
// location.reload causes a confirm box in FireFox
//      if (document.cookie) { location.reload(true); }
        if (document.cookie) { location.href = location; }
    </script>
    <meta http-equiv="refresh" content="<?=$content?>" />
</head>
<body>
    <form id="formid" method="post" action="" >
        <input type="hidden" name="<?=$session_name?>" value="<?=$session_id?>" />
        <input type="hidden" name="JS_DETECT" value="<?=session_id()?>" />
        <input type="hidden" name="JS_ENABLED" value="1" />
    </form>
    <script>
        document.getElementById('formid').submit();
    </script>
</body>
</html>
<?php
    exit;
}
?>

这里是转折! 可能有客户端浏览器启用了Javascript,并且使用JS兼容的浏览器。但是不管出于什么原因Javascript在浏览器中不能工作(比如:防火墙设置)。据统计,这种情况每93个场景中就会发生1个。所以服务器检测到客户端有能力执行Javascript,但实际上并没有!

作为解决方案,我建议我们在客户端站点设置一个cookie,然后从服务器读取它。如果cookie设置好了,JS就可以正常工作。有什么想法吗?


<noscript>甚至不是必需的,更不用说在XHTML中不受支持了。

工作的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
    <title>My website</title>
    <style>
      #site {
          display: none;
      }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js "></script>
    <script>
      $(document).ready(function() {
          $("#noJS").hide();
          $("#site").show();
      });
    </script>
</head>
<body>
    <div id="noJS">Please enable JavaScript...</div>
    <div id="site">JavaScript dependent content here...</div>
</body>
</html>

在本例中,如果启用了JavaScript,则可以看到站点。如果没有,则会看到“请启用JavaScript”消息。测试JavaScript是否启用的最好方法是简单地尝试和使用JavaScript!如果它工作,它被启用,如果没有,那么它不是…


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

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

当浏览器中没有启用js时,<noscript>标记中的代码将被执行。 我们可以使用noscript标签来显示msg来打开JS,如下所示。

<noscript>
    <h1 style="text-align: center;">
       To view this page properly, please 
       enable JavaScript and reload the page
    </h1>
</noscript>

同时保持我们的网站内容在身体隐藏。如下

<body>
<div id="main_body" style="display: none;">
    website content.
</div>
</body>

现在如果JS是打开的,你可以让main_body中的内容可见,如下所示

<script type="text/javascript">
    document.getElementById("main_body").style.display="block";
</script>

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


为什么需要知道服务器端是否启用了JavaScript ?浏览器支持哪种变体有关系吗?它是否需要理解关键字let或者只是var ?

我建议发送可读的内容,不需要任何JavaScript可访问,然后只是尝试加载JS文件添加所有你想要的JS行为。

For example, the UI might end up missing Login or Modify button if JS is not enabled and it might include a small text at the bottom (using <noscript> or some element with CSS animation that shows the text after a small delay if JS code doesn't remove the whole element soon enough) saying "To login/modify this content, you must enable JavaScript support in your browser." If you do this well, the reader may not even notice that anything is missing unless he or she is trying to login or modify the content.

作为一种优化,你可以用JavaScript设置cookie,如果你想异步获取它,服务器可以避免发送非JavaScript可读的内容。只是要确保在JS代码运行完成至少一次之后才设置这个cookie,而不是在JS代码开始运行时立即设置它,以确保当JS代码由于任何原因失败时(不是如果!)最终用户不会以空白屏幕结束。

(请注意,异步加载初始页面状态不会更快地将内容传递给最终用户。但是,如果没有JavaScript,您只能发送全部内容的一部分。这可以更快地呈现“优先”,然后使用JS代码异步加载页面的其余部分。)

作为一个额外的好处,搜索引擎仍然可以在不启用任何JavaScript的情况下索引您的站点。


更新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();