Show message if javascript disabled on client side using noscript tag
Try This :-
How to detect JavaScript is disabled in browser?As we know, tag is used for JavaScript. Same way there is tag which gets in action when the JavaScripts disabled in browser.
<script>Put Sample code here for execution when JavaScript is Active </script><noscript>Put Sample code here for execution when JavaScript is Disabled</noscript>How to handle disabled JavaScript in browser?
When JavaScript is disabled, Just tried to redirect to some page where we can display the message that Javascript is disabled. There is meta tag in HTML named “meta refresh” which will redirect the user to another page in the interval specified in that header.
<noscript> <META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html"></noscript>As, we can see above code inside noscript, there is “meta refresh” tag with interval of “0″ second. As, the JavaScript is disabled in that page, the browser gets redirected to “ShowErrorPage.html” to show some warning message.
I hope this will help you.
You are right. The <noscript> tag is used to show only if JavaScript is disabled.In order to test this, do the following:
- Save this snippet in a file "test.html".
- Open it with your brower.
- Enable/Disable JavaScript (In FireFox this is here: Tools/Options/Content/Enable JS).
As you can see, you can put any HTML inside the <noscript> tag that you would put inside the body of a page.
<html> <body> <h1>Simple Example Page</h1> <script type="text/javascript"> document.write("Hi, JavaScript is enabled!"); </script> <noscript> <div style="border: 1px solid purple; padding: 10px"> <span style="color:red">JavaScript is not enabled!</span> </div> </noscript> </body></html>
<noscript> <META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html"></noscript>is not a good solution as IE11 (and previous) have a security option that when set to 'high' disables both Javascript and Meta Refresh Tags!
The best solution I have found to handle this case is :
<noscript class="noscript"> <div id="div100"> Please enable javascript in your browser .... blah blah </div></noscript><style> body{ position:relative; } .noscript { width:100%; height:100%; /* will cover the text displayed when javascript is enabled*/ z-index:100000; /* higher than other z-index */ position:absolute; } .noscript #div100{ display:block; height:100%; background-color:white; }</style>