All geek questions in one place

How to determine if JavaScript is disabled and display a notification

I need to check if the JavaScript browser is disabled and then display a div error instead of a body, how can I do this?

+2
source share
4 answers
<html class="no-js"> <head> <style> .error, .no-js #container { display: none; } .no-js .error { display: block; } </style> <script> document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/, ''); </script> </head> <body> <div id="container"> rest of page </div> <div class="error"> sorry, no javascripty, no sitey! </div> </body> </html>

Of course, this is usually a bad idea, but I hope you already thought that.

+6
source

You will need to do it the other way around - so to speak, you will need to output everything and then hide / remove the div error using Javascript.

It is called Progressive Enhancement.

+7
source

in the body you can add:

 <noscript> Here the html to display when javascript is off </noscript>
+4
source
Decision

@roryf is a good approach, although it depends on jQuery, and if the domloaded event fires a bit later, you can get "flash" from the contents of no-js.

The following will remove the html.no-js class before displaying the body:

 <!DOCTYPE html> <html class="no-js"> <head> <script> if (document.documentElement) { var cn = document.documentElement.className; document.documentElement.className = cn.replace(/no-js/,''); } </script> </head>
+1
source

Source: https://habr.com/ru/post/1341763/

More articles:


All Articles