Best IT Recipes

How can a site instantly detect that javascript is disabled?

Usually, when the page loads and the browser is turned off by Javascript, we use the <noscript> tag to write something like a warning and tell the client to enable Javascript. However, Facebook, even after , you load a page with JS support enabled, and at the time of its disconnection you receive a notification. How can I do something like this?

UPDATE: this mechanism is no longer available on Facebook, but it was before, I asked this question too late, but if there is any answer, I would really appreciate it.

What i tried

I thought about the fact that there is a segment on my page that continues to check if Javascript is disabled, if so, show the contents of <noscript> .

To achieve this, I created the CheckJS.html page.

 <!DOCTYPE html> <html> <head> <meta http-equiv="refresh" content="0"> </head> <body> <noscript> JS is disabled! </noscript> </body> </html>

This page will continue to update when JS is disabled, JS is disabled! .

To add this page to my original page. I tried the following:

1-.load ()

I used jQuery before .load('CheckJS.html') inside the div . However, it seems that .load() only loads the contents of <body> CheckJS.html . The <head> element also means that inside it will not be loaded inside the div .

2- iframe

After some searching, I found that the only possible way to load a FULL html page , including <head> , is to use <iframe> .

 <iframe src="CheckJS.html"></iframe>

However, <meta http-equiv="refresh" content="0"> CheckJS.html affects the parent page, the original page itself began to be updated.

If we can use this <iframe> without causing the original page to refresh, this may be the solution, but even if this solution is found, I feel it is more of a trick than a real solution.



UPDATE

Anthony's answer proved that I was mistaken in the fact that iframe refreshes the original page, the browser shows that it refreshes, but in fact it is not there, if so, then Javascript can be avoided, CheckJS.html , which I provided, does the job , and even better, <noscript> will be hidden when JS is turned on again. However, this whole iframe approach is not so user-friendly (it can freeze the browser) if the update does not happen every 10 seconds or so, which is not instant detection .

+44
javascript html css noscript
Jul 24 2018-12-12T00:
source share
6 answers

CSS solution

See DEMO . Also available as a JS library .

Stop the CSS animation by constantly replacing the JavaScript element. When JavaScript is disabled, CSS animation starts and displays a message.

@keyframes Browser Compatibility : Chrome, Firefox 5.0+, IE 10+, Opera 12+, Safari 4.0+

 <style> .nojs_init { position: relative; animation:nojs-animation 0.2s step-end; -moz-animation:nojs-animation 0.2s step-end; /* Firefox */ -webkit-animation:nojs-animation 0.2s step-end; /* Safari and Chrome */ -o-animation:nojs-animation 0.2s step-end; /* Opera */ } @keyframes nojs-animation { from {visibility:hidden;opacity:0;} to {visibility:visible;opacity:1;} } @-moz-keyframes nojs-animation /* Firefox */ { from {visibility:hidden;opacity:0;} to {visibility:visible;opacity:1;} } @-webkit-keyframes nojs-animation /* Safari and Chrome */ { from {visibility:hidden;opacity:0;} to {visibility:visible;opacity:1;} } @-o-keyframes nojs-animation /* Opera */ { from {visibility:hidden;opacity:0;} to {visibility:visible;opacity:1;} } </style> 
 <body> <div id="content"></div> <div id="nojs" class="nojs_init"><noscript>JavaScript is <span style="font-weight:bold;">disabled</span>.</noscript></div> </body> <script> document.getElementById("content").innerHTML = 'JavaScript is <span style="font-weight:bold;">enabled</span>. Try disabling JavaScript now.'; var elm = document.getElementById("nojs"), animation = false, animationstring = 'animation', keyframeprefix = '', domPrefixes = 'Webkit Moz O ms Khtml'.split(' '), pfx = ''; if( elm.style.animationName ) { animation = true; } if( animation === false ) { for( var i = 0; i < domPrefixes.length; i++ ) { if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) { pfx = domPrefixes[ i ]; animationstring = pfx + 'Animation'; keyframeprefix = '-' + pfx.toLowerCase() + '-'; animation = true; break; } } } // Continuously replace element function jsdetect() { var elm = document.getElementById("nojs"); var newone = elm.cloneNode(true); elm.parentNode.replaceChild(newone, elm); } // Only apply to browsers that support animation if (animation) { elm.innerHTML = 'JavaScript is <span style="font-weight:bold;">disabled</span>.'; setInterval(jsdetect, 0); } </script>
+15
Feb 08 '13 at 0:59
source share

I think it depends on the browser. HTML5 supports <noscript> in the HEAD element, so you can try something like this:

 <style> .noscriptMessage { display: none; } </style> <noscript> <style> .noscriptMessage { display: block } </style> </noscript> <body> <div class=".noscriptMessage">Foo bar baz</div> ... </body>

Spec: http://dev.w3.org/html5/markup/noscript.html

From the specification:

Allowed content: zero or more: one link element or one meta http-equiv = default style element or one meta-http-equiv = update element or one style element

Edit: hey peeks, SO does the same! Just try disabling JS now.

+6
Jul 24 2018-12-12T00:
source share

What about javascript code that constantly delays updating http-equiv = refresh (each time replacing a meta element?) Once javascript is disabled, the meta element is no longer replaced, and the update will eventually happen. This is just a thought, I don’t know if meta elements can be set

+2
Jul 24 '12 at 16:19
source share

I would recommend seeing how this is done using the HTML5 Boilerplate and Modernizr.

If you look at the HTML5 Boilerplate HTML, on line 7 you will see that the <html> set to the no-js class. Then when JavaScript Modernizr is running, the first thing it does is remove the no-js class.

This is done, you can apply CSS rules that display only content if the no-js class is present:

 #no-script-message { display: none; } .no-js #no-script-message { display: block; }
+1
Jul 24 '12 at 18:22
source share

Turning around @ JoshMock's answer, here is a simple approach (via Paul Irish ) to determine if the JS client is enabled:

HTML

 <html class="no-js"> <head> <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>

This should be compatible with all browsers and pretty fast. Then you can hide / show elements in css with classes .js and .no-js .

If you perform any other function discovery, I would suggest using Modernizr with the html class="no-js" markup (modernizr will automatically add js for you along with css3 detection).

-one
Feb 07 '13 at 20:07
source share

In fact, it is easier to detect if the browser supports java-script than vice versa.

Of course, this happens when "the site instantly detects javascript." A witch is the first request of an HTTP request ↔ from a browser to a server. You simply cannot. After determining the capabilities of the browser, you have to send another request to the server.

Now there is no way to check if JavaScript is enabled on the server side on first request . Thus, if JavaScript is disabled, you need to do a postback or redirect to a page without JavaScript, using what others have suggested (the witch is invalid but seems to work):

 <head> <noscript><meta http-equiv="refresh" content="0; url=whatyouwant.html"></noscript> ... </head>

There are some “browser features” and “browser plugins” that can be obtained using an HTTP request, so to achieve your goal you will need a good “server side” script.

See browserhawk or quirksmode for some details on javascript for browser detection.

In addition, there is a “protected” question aboout how-to-detect-if-javascript-is-disabled

-3
Feb 07 '13 at 16:42
source share


More articles:


All Articles