Detecting JavaScript Enabled Browsers

Home
Tips
Examples
BookStore
Links
Mail

Though it might seem inconceivable that there are still people out there using browsers that are not JS enabled, it is nevertheless true. Maybe he is using a pre-historic browser; maybe he turned off JavaScript afraid that someone will format his hard disk using a JavaScript program (this condition is usually referred to as paranoia by medics); or maybe he's just plain tired of the things people like you and me do to his browser using JavaScript (I have to admit this seems a bit far fetched. I mean, who could ever get tired of flashing background, scrolling status bar and helpful messages popping up every now and then).

While writing an HTML page containing JavaScript, it is always a good idea to consider non JS browsers also. Some of the common techniques for dealing with non JS browsers are described below.

Using comments properly within <SCRIPT> tags: If your page is usable even without JS support, then all you have to do is put the JS code within an HTML comment block. Non JS browsers will consider it as just a comment and ignore it while browsers supporting JS will ignore the comment block and execute the script.

<SCRIPT LANGUAGE="JavaScript"> <!-- Hide from non JS browsers alert("Your browser supports JavaScript!"); // --> </SCRIPT> The above code will pop up a dialog box in a a JS browser but will have no effect in a non-JS browser.

Using the <NOSCRIPT> tag: You may sometimes want to do one thing in a JavaScript enabled browser and something quite different in a non JavaScript browser. For this, the above method is not sufficient. As an example, consider the statement in red color at the top of this page. It would have been an entirely different sentence if your browser It was done using the <NOSCRIPT> tag. All JavaScript enabled browsers recognize the <NOSCRIPT> tag. They will just ignore whatever is between <NOSCRIPT> and </NOSCRIPT>. Browsers that do not support JavaScript do not know about the <NOSCRIPT> tag. They will ignore the tags but will display what ever is in between. Here is the code for the statement at the top of the page.

<SCRIPT LANGUAGE="JavaScript"> <!-- document.write("Your browser supports JavaScript."); document.write("Try turning off JavaScript:); document.write("and reloading this page"); // --> </SCRIPT> <NOSCRIPT> Your browser doesn't support JavaScript or JavaScript suport has been disabled. </NOSCRIPT> Note that proper commenting is still required between the <SCRIPT> tags because non JavaScript browsers don't recognize the <SCRIPT> tag either and will display the code within them if it is not commented.

Displaying the correct page depending on the browser: If your page uses JavaScript heavily and will not work on a non JS browser, then it's better to create two versions of the page, one using JavaScript and the other not using JavaScript. The non JS page maybe just a message informing the user that his browser is not capable of JavaScript. Now, to make the browser automatically load the correct page, make the following modifications in the non JS page.

  1. Within the <HEAD> tag of the page, insert JavaScript code to throw the browser to the JS enabled page. <SCRIPT LANGUAGE="JavaScript"> <!-- window.location.href = "js_enabled.htm"; // --> </SCRIPT> Don't forget to enclose the script within HTML comments as shown. Now, when ever this page is loaded in a JS enabled browser, it will automatically go to the JS enabled page. The only problem with this page is that it's contents are displayed in the browser before loading the JS enabled page. Step 2 solves that problem.

  2. Enclose everything in the <BODY> tag between <NOSCRIPT> and </NOSCRIPT>. Now the contents of the page will be displayed only in a non-JS browser. <BODY> <NOSCRIPT> You need a JavaScript enabled browser to view this page. </NOSCRIPT> </BODY>

All links to should point to the non-JS version of the page. If the browser doesn't support JavaScript, the contents of the page are displayed. If the browser supports JavaScript, the JS version of the page is automatically loaded in the browser.

GeoCities
Me from GeoCities