Display "Enable JavaScript" message only when JavaScript is disabled
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.
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.
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?
You're looking for the <noscript> tag.
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:
<!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>
You can do this. If JavaScript is disabled it will show the message "JavaScript Disabled"
<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; }");
See 1 Way To Avoid the Flash of Unstyled Content
To avoid javascript disable problem.
before starting any writing on your webpage just put the below code.
<!-- saved from url=(0014)about:internet-->
You have to never ask any question to end user.
First try it.
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.
You will still have a flash, and of course, one more page request to the server. But it may be a 'prettier' flash.
加载中,请稍侯......
精彩评论