I need a way of detecting when Javascript has been disabled in the browser, and if it is disabled, pop up a message (like the one seen at the Storyville store, which is apparently powered by Magento). I intend to have a message pop up informing users that they don’t have Javascript turned on, and within this message, display a link to a fully functional alternative page layout that doesn’t rely at all on Javascript.
I think it’s done with a PHP script, so I wondered if you guys could tell me how it’s done or where I can find a script that does what I need?
Thanks. That does work for me, but why wouldn’t it work when placed in a separate .js file and then linked from the head in the HTML file? Just trying to understand things better.
Felgall, I don’t get this. I copied and pasted the code from the page you linked to, but for some reason it’s not working. As I don’t understand Javascript (although I intend to start learning raw Javascript properly soon from books when I get some spare money), it doesn’t make sense to me and I would appreciate it if I could get some help with it.
I’ve got this in my test HTML file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Display a warning message if Javascript is unsupported or disabled</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="../area51/assets/scripts/js/jstest.js"></script>
</head>
<body>
<p id="script">It has been detected that either your browser does not support Javascript, or Javascript has been disabled. Please <a href="#">click here</a> to view the non-Javascript website.</p>
</body>
</html>
I’ve Googled and the above script seems to be correct from what I understood. But I still see the warning message in my browser (Chrome and I’ve made doubly sure Javascript has been enabled). From what I understand, I shouldn’t be seeing anything on the page.
Just one thing though. I was checking out noscript in the reference section on SitePoint, and someone pointed out that it’s bad practice to use noscript for warning messages. So, if this is the case, are there any alternative techniques I could use?
Now that the fog in my brain has dissipated, I guess I would use:
<p id="script">It has been detected that either your browser does not support Javascript, or Javascript has been disabled. Please < href="#">click here </a>to view the non-Javascript website.</p>
somewhere in the HTML and putting the script below into a separate .js file and linking to it from the head.
Right okay, still a bit confused because I see a lot of websites that link to their jQuery, MooTools, or other Javascript files from the head, but for some reason it didn’t work with my simple JS file.
I thought it was best practice to put Javascript in an external file, which is why I did it. I think I’m just going to buy a couple of good books for learning basic Javascript and go from there. For now, the script I’ve got works.
Your visitor can turn JavaScript on and off part way through your page loading into their browser and so just because JavaScript was enabled when your server processing started to send the web page doesn’t mean it will still be enabled when the page starts loading in the browser.
Checking if JavaScript is enabled or not can only be accurately tested for using JavaScript itself.
Ah! Thanks for telling me. I’ll test it out. I never realised what noscript was for, despite having learned HTML ages ago. Never had a reason to use noscript until now. So thanks.
Using JavaScript itself is far more flexible than using <noscript>.
What you do is to place the code into the HTML of the web page to start with and then use JavaScript to remove it from the page when JavaScript is enabled.
That results in much shorter code than using <noscript> and is also more flexible in that you can test for whether specific functionality that you need in JavaScript is enabled as well (such as for when you want to provide the alternative when ajax isn’t available rather than just JavaScript.
<noscript>
The html here is shown if no javascript is present.
</noscript>
PHP has no direct means to determine browser capability. HTTP_USER_AGENT string analysis is popular, but flawed since the string can be falsified, and browsers are constantly improving (as IE 9 recently showed).
More reliable, but requiring AJAX, is to have javascript send information about itself after the first page loads. The downside here is the first page of the session must be built without knowing exactly what the browser can do.
Being in or out of a separate file makes no difference at all.
You should have just moved the script tag (which references the script file) to be just before the </body> tag.
What’s happening is when javascript reaches the script tag, the rest of the page belo the script tag does not yet exist. This is why placing scripts just before the </body> tag can help to simplify some issues, along with giving the appearance of a faster loading web page.
I’ve just read the link you provided, and I still don’t get it. My mind is knotting up like you wouldn’t believe. I’m a Javascript virgin. So would you mind elaborating if possible?
When you say to put the code into the HTML, do you mean the noscript tags? Or are you talking about some other code?
