Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show message if javascript disabled on client side using noscript tag

Tags:

I want to flag a message if javascript is disabled at client side. I searched here and found <noscript> tag to use for handling this stuff.

I did this at w3schools editor to check but its not working let me know if this <noscript> is not meant for this or something else I am missing in this part ?

enter image description here

like image 459
Trialcoder Avatar asked Mar 05 '13 08:03

Trialcoder


People also ask

Does noscript disable JavaScript?

NoScript is, essentially, a Firefox add-on that disables things like JavaScript from running on web sites you visit.

How can I tell if JavaScript is disabled?

To detect if JavaScript is disabled in a web browser, use the <noscript> tag. The HTML <noscript> tag is used to handle the browsers, which do recognize <script> tag but do not support scripting. This tag is used to display an alternate text message.

What HTML tag is used if a user's browser has JavaScript disabled to notify the user JavaScript behavior Cannot be interpreted?

Definition and Usage The <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support script.


3 Answers

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.

like image 168
Rubyist Avatar answered Oct 06 '22 18:10

Rubyist


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>
like image 24
jensP Avatar answered Oct 06 '22 19:10

jensP


<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> 
like image 35
frank Avatar answered Oct 06 '22 17:10

frank