只在禁用JavaScript时显示“启用JavaScript”消息

I want to display to the user a message that says "please enable JavaScript" in the case that JavaScript is disabled. I want that message, and nothing else to be displayed when JavaScript is disabled.

我想向用户显示一条消息，在禁用JavaScript的情况下显示“请启用JavaScript”。我希望这条消息，在禁用JavaScript时不会显示任何其他内容。

So, to do this, I can put the message in the DOM and hide all other elements with display:none. Then in JavaScript I can set the message to display hidden and show all other elements.

为此，我可以将消息放到DOM中，并使用display:none隐藏所有其他元素。然后在JavaScript中，我可以将消息设置为显示隐藏并显示所有其他元素。

But I get a flicker with this approach. The error message shows up for a while (especially on mobile browsers) before it gets hidden.

但我对这种方法有一点怀疑。错误消息在隐藏之前会显示一段时间(特别是在移动浏览器上)。

How can I minimize the time the error message is displayed for?

如何最小化显示错误消息的时间?

6 个解决方案

#1

You're looking for the <noscript> tag.

您正在寻找

#2

Inline javascript has to run before the rest of the document is loaded. You can use this behaviour to add style to the page to hide the desired element, before the element is loaded. This should theoretically stop FOUC across all and every browser (including mobile). Here's an example of a standalone HTML that shows a message to those with no javascript. This technique also takes care of what Hussein was mentioning about Firewalls blocking javascript:

内联javascript必须在加载其余文档之前运行。您可以在元素加载之前，使用此行为向页面添加样式以隐藏所需的元素。从理论上讲，这应该可以阻止FOUC在所有浏览器(包括移动浏览器)中出现。这里有一个独立的HTML示例，它向那些没有javascript的用户显示一条消息。这种技术还考虑到了侯赛因提到的防火墙阻塞javascript的问题:

<!doctype html>
<html>
<head>
<title>No FOUC</title>
<script type="text/javascript">
document.write('<style type="text/css">#no-js { display: none; }</style>');
</script>
</head>
<body>
<div id="no-js">You don't have javascript, BOOOO</div>
</body>
</html>

#3

You can do this. If JavaScript is disabled it will show the message "JavaScript Disabled"

你能做到的。如果禁用了JavaScript，就会显示“禁用了JavaScript”

 <p id="jsDisabled">JavaScript disabled.</p>

<script type="text/javascript">
    function hideScriptDisabled() {
        document.getElementById("jsDisabled").display = "none";
    }
    hideScriptDisabled();
    </script>

If that is creating a flickering problem, use something like this,

如果这造成了闪烁的问题，用这样的方法，

document.write(".jsDisabled { display: none; }");

#4

See 1 Way To Avoid the Flash of Unstyled Content

请参阅一种避免无样式内容的闪烁的方法

#5

-1

To avoid javascript disable problem.

避免javascript禁用问题。

before starting any writing on your webpage just put the below code.

在开始在你的网页上写之前，先把下面的代码写下来。

< !——保存从url =(0014):互联网- - >

You have to never ask any question to end user.

你永远不需要向最终用户提出任何问题。

First try it.

第一次尝试它。

#6

-3

You really can't. The flicker is just the way it is...especially on slow mobile devices (namely Nokia...OH HOW I HATE NOKIA!)

你真的不能。闪烁就是它本来的样子，尤其是在慢速移动设备上(也就是诺基亚)。哦，我多么讨厌诺基亚!

The only other option is to load a splash page first. In the HEAD add a meta refresh of several seconds that will refresh to a 'turn on javascript error'. On the BODY, add a javascript redirect that should trigger immediately.

另一个选项是先加载一个启动页面。在头部添加几秒钟的元刷新，刷新到“打开javascript错误”。在主体上，添加一个应该立即触发的javascript重定向。

You will still have a flash, and of course, one more page request to the server. But it may be a 'prettier' flash.

您仍然会有一个flash，当然，还有一个页面请求到服务器。但它可能是一个“更漂亮”的闪光。

#1