如何使div突然显示即使页面已经打开，JavaScript是否被禁用

我知道在禁用JavaScript时如何显示内容，但我想做的是使一个div突然出现，即使页面在禁用JavaScript时处于打开状态

页面已打开

用户进入浏览器设置并禁用JavaScript

显示一个div而不刷新页面 我该怎么做？我见过其他网站这样做，但我查看了他们的JavaScript文件，没有发现任何内容

---

提前谢谢

据我所知，如果不刷新页面，至少不使用HTML和Javascript，这是不可能的。您描述的行为不在任何标准中，因此一旦用户选择禁用javascript，不同的浏览器可能会采取不同的操作

作为开发人员，通常的机制是使用元素。如果页面已加载且javascript已禁用，大多数浏览器都会显示此信息。如果页面已加载且用户随后禁用了javascript，某些浏览器也可能会显示它

---

禁用脚本时，该元素的内容会在页面刷新后显示。

您可以将

放在

元素中，然后使用CSS设置其不透明度的动画：

@-webkit-keyframes showme {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@-moz-keyframes showme {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@-ms-keyframes showme {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

#box {
     -webkit-animation: showme 5s;
     -moz-animation:    showme 5s;
     -ms-animation:     showme 5s;
}

---

…当然，浏览器支持将是一个问题。

这里有一个使用CSS动画的解决方案。是的，但我想不出任何替代方案

这会隐藏您的邮件，将其设置为

0

的

font size

，并在延迟一秒钟后重置为

100%

。每半秒钟，JavaScript就会切换到一个虚拟动画来重新启动动画，该动画会保持元素隐藏。（）

HTML JavaScript

---

您需要使用其他供应商前缀复制所有

webkit

前缀属性；为了清楚起见，我在这里省略了它们。

我认为没有任何方法可以做到这一点。用户只需接受这样一个事实，即如果他们关闭JavaScript，他们必须刷新以获得gracefall回退。@polynomy-OP说：“我见过其他网站这样做”。看到这些网站的链接会很好。你能举个例子吗？@j08691我忘了是什么网站了。。。我会努力找到它。你能验证这是否适用于第2步和第3步吗？在Chrome中对我不起作用。@amnotiam-答案已修改。我不相信不刷新就可以做到这一点（或者至少依赖于浏览器）。当我禁用JavaScript并登录某个页面（我忘记了它是什么网站）时，我正在使用Chrome，当我在该页面上时，突然出现了一个div，让我查看源代码和JavaScript文件，但我什么也找不到。我正试图找到这个网站，这样你就可以看到它。@Nathan-完全有可能Javascript还在那个页面上运行。禁用javascript可能只适用于新加载的页面。是的@杰里米班克斯的答案是完美的。虽然它在某些浏览器中不起作用，但至少在现代浏览器中起作用。哇，它起作用了！大多数用户很可能会使用CSS3浏览器，所以非常感谢，这太完美了！巧妙的把戏。我的意思是，这很难看，但在支持浏览器方面做得很好。除了@Polymon所说的，这看起来对大多数网站来说太多了。我发现这个用例有点难以置信（检测到用户在运行中禁用了javascript），我假设OP看到了一些不同的东西。

<div id="noscript-message">
    Please enable JavaScript to use this page.
</div>

<div>
    Spiffy JavaScript app here!
</div>

#noscript-message {  
    -webkit-animation-duration: 1s;
    -webkit-animation-name: delayedDisplay;
    color: blue;
}

@-webkit-keyframes delayedDisplay {
    0% { font-size: 0;}
    99% { font-size: 0;}
    100% { font-size: 100%; }
}

@-webkit-keyframes delayedDisplay_dummy {
    0% { font-size: 0; }
    100% { font-size: 0; }
}

var message = document.getElementById("noscript-message");

setInterval(function() {
    message.style.webkitAnimationName = "delayedDisplay_dummy";
    setTimeout(function() {
        message.style.webkitAnimationName = "delayedDisplay";
    }, 0);
}, 500);