Menu
Normally, when a page is loaded, and the browser has Javascript disabled, we use the <noscript> tag to write something like a warning and tell the client to enable Javascript. However, Facebook, even after you load the page with JS enabled, the moment it's disabled you get a notification. How can I do something like this?
UPDATE : This mechanism is no longer available in Facebook, but it was before, I was too late in asking this question, but if any answer is found, I would really appreciate it.
I thought about having a segment inside my page which keeps checking if Javascript is disabled, if yes, show the contents of <noscript>.
To Achieve this, I created a page CheckJS.html.
<!DOCTYPE html> <html> <head> <meta http-equiv="refresh" content="0"> </head> <body> <noscript> JS is disabled! </noscript> </body> </html> This page will keep on refreshing, when JS is disabled, JS is disabled! will appear.
To add this page inside my original page. I tried the following:
1- .load()
I used JQuery to .load('CheckJS.html') inside a div. However, it seems that .load() only loads the contents of the <body> of CheckJS.html. Means the <head> element and what's 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 an <iframe>.
<iframe src="CheckJS.html"></iframe> However, the <meta http-equiv="refresh" content="0"> of CheckJS.html affects the parent page, the original page itself started refreshing.
If we are able to use this <iframe> without forcing the original page to refresh, then this could be a solution, but even if this solution is found, I feel its more of a trick rather than a real solution.
UPDATE
Antony 's answer proved that I was wrong about that the iframe refreshes the original page, the browser shows that its refreshing but actually its not, if this is it, then Javascript can be avoided, the CheckJS.html that I provided does the job, and even better, the <noscript> will be hidden when JS is re-enabled. Still this whole iframe approach isn't so user friendly (could freeze the browser), unless refresh occurs every 10 seconds or so, which isn't an instant detection.
973
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.
Many Internet Web sites contain JavaScript, a scripting programming language that runs on the web browser to make specific features on the web page functional. If JavaScript has been disabled within your browser, the content or the functionality of the web page can be limited or unavailable.
Blocking JavaScript can disable functionality on websites, and may make some websites unusable. Blocking it in Chrome isn't an all-or-nothing setting, though. You can choose to block specific sites, or, if you block all JavaScript, set exceptions for specific websites you define.
See DEMO. Also available as a JS library.
Stop the CSS animation by continuously replacing the element with JavaScript. Once JavaScript is disabled, the CSS animation kicks in 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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
