Question

通常，当加载页面并且浏览器禁用Javascript时，我们使用<noscript>标记写出类似警告的内容并告诉客户端启用Javascript。然而，Facebook，甚至之后你加载了启用了JS的页面，当它被禁用时你会收到通知。我怎么能这样做？

更新：这个机制在Facebook上已经不再可用，但是之前，我提出这个问题已经太迟了，但如果找到任何答案，我会非常感激。

我尝试了什么

我想在我的页面中有一个段，一直在检查Javascript是否被禁用，如果是，则显示<noscript>的内容。

为实现这一目标，我创建了一个页面 CheckJS.html 。

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="refresh" content="0">
</head>
<body>
    <noscript>
       JS is disabled!
    </noscript>
</body>
</html>

此页面将继续刷新，当禁用JS时， JS已停用！将会出现。

在我的原始页面中添加此页面。我尝试了以下方法：

1- .load（）

我在.load('CheckJS.html')内使用 JQuery 到div。但是，似乎.load()仅加载 CheckJS.html 的<body>的内容。表示<head>元素及其内部的内容不会加载到div中。

2- iframe

经过一些搜索，我发现加载完整 html页面包括<head> 的唯一可行方法是使用<iframe>。

<iframe src="CheckJS.html"></iframe>

但是， CheckJS.html 的<meta http-equiv="refresh" content="0">会影响父页面，原始页面本身会开始刷新。

如果我们能够在不强制原始页面刷新的情况下使用此<iframe>，那么这可能是一个解决方案，但即使找到了这个解决方案，我也觉得它更像是一个技巧而不是真正的解决方案。

更新

Antony 's answer证明我错了iframe刷新原始页面，浏览器显示其刷新但实际上不是，如果是这样，那么Javascript可以避免，{我提供的{1}}完成了工作，更好的是，当重新启用JS时，CheckJS.html将被隐藏。仍然这整个iframe方法不是那么用户友好（可以冻结浏览器），除非刷新每10秒左右发生一次，这不是即时检测。

Answer 1

CSS解决方案

请参阅 DEMO 。也可以JS library。

通过不断用JavaScript替换元素来停止CSS动画。一旦禁用JavaScript，CSS动画就会启动并显示一条消息。

^{@keyframes Browser compatibility：Chrome，Firefox 5.0 +，IE 10 +，Opera 12 +，Safari 4.0 +}

<style>
.nojs_init { 
position: relative;
animation:nojs-animation 0.2s step-end;
-moz-animation:nojs-animation 0.2s step-end; /* Firefox */
-webkit-animation:nojs-animation 0.2s step-end; /* Safari and Chrome */
-o-animation:nojs-animation 0.2s step-end; /* Opera */
}

@keyframes nojs-animation
{
from {visibility:hidden;opacity:0;}
to {visibility:visible;opacity:1;}
}

@-moz-keyframes nojs-animation /* Firefox */
{
from {visibility:hidden;opacity:0;}
to {visibility:visible;opacity:1;}
}

@-webkit-keyframes nojs-animation /* Safari and Chrome */
{
from {visibility:hidden;opacity:0;}
to {visibility:visible;opacity:1;}
}

@-o-keyframes nojs-animation /* Opera */
{
from {visibility:hidden;opacity:0;}
to {visibility:visible;opacity:1;}
}
</style>

<body>
<div id="content"></div>
<div id="nojs" class="nojs_init"><noscript>JavaScript is <span style="font-weight:bold;">disabled</span>.</noscript></div>
</body>
<script>
document.getElementById("content").innerHTML = 'JavaScript is <span style="font-weight:bold;">enabled</span>. Try disabling JavaScript now.';

var elm = document.getElementById("nojs"),
    animation = false,
    animationstring = 'animation',
    keyframeprefix = '',
    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
    pfx  = '';

if( elm.style.animationName ) { animation = true; }    

if( animation === false ) {
  for( var i = 0; i < domPrefixes.length; i++ ) {
    if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
      pfx = domPrefixes[ i ];
      animationstring = pfx + 'Animation';
      keyframeprefix = '-' + pfx.toLowerCase() + '-';
      animation = true;
      break;
    }
  }
}

// Continuously replace element
function jsdetect() {
    var elm = document.getElementById("nojs");
    var newone = elm.cloneNode(true);
    elm.parentNode.replaceChild(newone, elm);
}

// Only apply to browsers that support animation
if (animation) {
    elm.innerHTML = 'JavaScript is <span style="font-weight:bold;">disabled</span>.';
    setInterval(jsdetect, 0);
}
</script>

Answer 2

嗯，我认为这取决于浏览器。 HTML5支持HEAD元素中的<noscript>，因此您可以尝试这样的事情：

<style>
    .noscriptMessage {
         display: none;
     }
</style>
<noscript>
    <style>
        .noscriptMessage {
             display: block
        }
    </style>
</noscript>

<body>
    <div class=".noscriptMessage">Foo bar baz</div>
    ...
</body>

规格：http://dev.w3.org/html5/markup/noscript.html

来自规范：

允许的内容：零个或多个：一个链接元素，或一个元 http-equiv = default-style元素，或者一个元http-equiv = refresh 元素，或一个样式元素

编辑：嘿偷看，SO也一样！现在就试着关掉JS吧。

Answer 3

javascript代码如何连续推迟http-equiv =刷新（每次更换元素？）一旦javascript关闭，元素就不再被替换，最终将进行刷新。这只是一个想法，我不知道元元素插入是否可行。

Answer 4

我建议您查看HTML5 Boilerplate和Modernizr是如何完成的。

如果您查看HTML5 Boilerplate的HTML，在line 7上，您会看到<html>标记被赋予no-js类。然后，当Modernizr的JavaScript运行时，它首先要删除no-js类。

完成后，如果no-js类存在，您可以应用仅显示内容的CSS规则：

#no-script-message {
    display: none;
}
.no-js #no-script-message {
    display: block;
}

Answer 5

扩展@JoshMock的答案，这是一个简单的方法（通过Paul Irish）来检测客户端是否启用了JS：

<强> HTML

<html class="no-js">
<head>
  <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>

这应该与所有浏览器兼容并且非常快。然后，您可以使用.js和.no-js类隐藏/显示css中的元素。

如果您正在进行任何其他功能检测，我建议将Modernizr与html class="no-js"标记一起使用（modernizr将自动为您添加js类，以及css3检测）。

Answer 6

实际上，更容易检测浏览器是否支持java脚本而不是相反。

当然，这是'一个网站立即检测到javascript'的情况。 Witch是第一个http请求＆lt; - ＆gt;从浏览器到服务器的响应。你只是'不能'。在确定浏览器功能后，您必须向服务器发送另一个请求。

现在，无法检查第一次请求时是否从服务器端启用了JavaScript 。因此，如果JavaScript被禁用，您必须使用其他一些建议进行回发或重定向到非JavaScript页面（巫婆无效，但似乎有效）：

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

有一些“浏览器功能”和浏览器“插件”可以通过http请求获取，因此您需要一个良好的“服务器端”脚本来实现您的目标。

请参阅browserhawk或quirksmode了解javascript上的某些信息来检测浏览器。

此外，还有how-to-detect-if-javascript-is-disabled

的“受保护”问题

网站如何立即检测到javascript已被禁用？

我尝试了什么

6 个答案:

CSS解决方案