46

通常，当一个页面被加载，并且浏览器禁用了 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()

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

2- iframe

经过一番搜索，我发现加载完整html 页面的<head>唯一可能方法是使用<iframe>.

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

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

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

更新

安东尼的回答证明我错了iframe刷新原始页面，浏览器显示刷新但实际上不是，如果是这样，那么可以避免使用JavascriptCheckJS.html，我提供的可以完成这项工作，甚至更好,<noscript>重新启用 JS 时将隐藏。整个 iframe 方法仍然不是那么用户友好（可能会冻结浏览器），除非每 10 秒左右刷新一次，这不是即时检测。

4

6 回答 6

15

CSS 解决方案

见演示。也可用作JS 库。

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

@keyframes 浏览器兼容性：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>
于 2013-02-08T00:59:13.027 回答
6

嗯，我认为这取决于浏览器。HTML5 支持<noscript>HEAD 元素，因此您可以尝试以下操作：

<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 元素，或一个样式元素

编辑：嘿，偷看，所以也一样！现在尝试关闭 JS。

于 2012-07-24T15:26:10.160 回答
2

持续推迟 http-equiv=refresh 的 javascript 代码（每次替换元元素？）一旦关闭 javascript，元元素就不再被替换，刷新最终会发生。这只是一个想法，我不知道是否可以插入元元素。

于 2012-07-24T16:19:51.480 回答
1

我建议研究一下 HTML5 Boilerplate 和 Modernizr 是如何做到的。

如果你查看 HTML5 Boilerplate 的 HTML，在第 7 行你会看到<html>标签被赋予了一个no-js. 然后，当 Modernizr 的 JavaScript 运行时，它做的第一件事就是删除no-js该类。

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

#no-script-message {
    display: none;
}
.no-js #no-script-message {
    display: block;
}
于 2012-07-24T18:22:49.093 回答
0

扩展@Jos​​hMock 的答案，这是一个简单的方法（通过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 中的元素。

如果您正在进行任何其他功能检测，我建议您使用带有标记的Modernizrhtml class="no-js"（modernizr 会自动为您添加 js 类以及 css3 检测）。

于 2013-02-07T20:07:31.997 回答
-3

实际上，检测浏览器是否支持 java-script 比检测反之更容易。

当然，这是在“站点立即检测到 javascript”的情况下。Witch 是浏览器对服务器的第一个 http-request <--> 响应。你只是'不能'。在确定浏览器功能后，您必须向服务器发送另一个请求。

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

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

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

有关用于检测浏览器的 javascript 的一些信息，请参阅browserhawk或quirksmode。

此外，还有一个关于如何检测是否 javascript-is-disabled的“受保护”问题

于 2013-02-07T16:42:19.083 回答