Selecting a Different Page if Javascript is Disabled

Do you have a web site that relies on Javascript? Do you sometimes think how useful that it would be to provide alternate pages for those who are browsing your site with javascript disabled or even using browsers that don't support Javascript?

Well it is relatively easy to create separate versions of a page for use by those with and without Javascript support but there is also the matter of how you will redirect people to the right version of the page depending on whether or not their browser will process Javascript.

So let's start by creating two pages. Let's assume that this page is the one that we have created for those whose browsers don't support Javascript or where they have chosen to browse with Javascript disabled, and this page is the one for people whose browsers support Javascript. Presumably there would be a lot more on each of these pages with the second page providing lots of automated functions via javascript while the first page would be mostly just plain text but I've just created these two pages with enough differences so that you can tell which one you are looking at. Go ahead and click both links so that you can see what the differences are.

Now you could just place both links on the page and label them as to which is which and let the visitor to your page decide which is the appropriate link to follow. If that was the way to go then this page wouldn't be in the Javascript Hints and Tips section of the site. This page is here to show you how to create one link that will automatically select which of the two pages to display depending on whether or not the browser supports Javascript.

And here's the link.

Assuming that your browser has Javascript enabled this link will take you to the page that tells you that it is enabled.

If you are using Internet Explorer and want to disable Javascript so that you can see what the link does with Javascript disabled then you will find the option to do this under the Security section of Internet Options. The option that you are looking for is under Custom Level in the Scripting section toward the bottom of the list. Changing the Active Scripting option between Enable and Disable will respectively enable and disable all client side scripting including Javascript.

The code to provide a single link that will transfer to one of two pages depending on whether or not Javascript is enabled is very simple. So simple that the entire code can be incorporated into the link. The code for your two way link needs to read as follows:

 <a href="plaintext.htm" onclick="window.location='javascript.htm';return false;"> 

Just substitute the name of your non-Javascript page for plaintext.htm and of your javascript page for javascript.htm and add the image or text for your link and the followed by the close link tag to the end of this code to complete the creation of your two way link.

How does this link work? Well if Javascript is enabled the code in the onclick executes to load the specified page for when Javascript is supported. The return false; tells the browser not to follow the href link in this instance. When Javascript is not supported the onclick code will be ignored and the page that doesn't require Javascript referenced in the href will be loaded.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow