How to co-exist with and without javascript

This page is written as an attempt to show people how to write pages that work simultaneously with javascript enabled browsers, and non-javascript browsers.

Why should you care? Because

Search engines dont use javascript
Blind people cant use javascript
Palm pilots, etc. probably arent using javascript either.

The key technique to notice in all of the following examples is that certain elements only appear if javascript is enabled. Contrariwise, if javascript is not enabled, other elements appear. The idea being that you can provide javascript "shortcuts" when available, but always provide a fallback method when it isn't.

Example #1: client-side redirects

This first example shows how to make a form that minimizes hits on your server by having a javascript button that will make the browser jump directly to the location selected.

However, if javascript is not enabled, the pages falls back to a CGI redirect.
(which requires you to provide a redirect cgi handler on your server.)

Examine the source code for this page to see how it is done

Example #2

This example is almost IDENTICAL to the above, but uses a pulldown list instead of a scrollable list, and jumps as soon as a particular option is selected, if javascript is enabled. (There is no way to do it without javascript, but at least SOMETHING shows up in that situation)

If javascript is not enabled, then a standard HTML FORM interface is used, along with an added [GO] button.

I'd like to point out that the javascript "jump immediately" behaviour is actually very user-hostile. People often select the wrong value on a selector list. But if you really want it, here's how to make it happen.

Trivial "redirect" cgi

If you're wondering what to use as a cgi redirect handler on your server: Feel free to use this trivial little snippet on a UNIX box: (rename it to "redirect.cgi", and "chmod 0755 redirect.cgi")

#!/bin/sh

read line
newloc=`echo $line|sed 's/^redirect=//'`
if [ "$newloc" == "" ] ; then
	echo "Content-type: text/plain"
	echo ""
	echo "ERROR: you didnt pick a new document"
	exit 0
fi
echo "Location: $newloc"

Unfortunately, the above isn't exactly as secure as it could be. Hopefully, it will give you the idea, though.

If your web service provider does not allow you to run CGI scripts... consider displaying a plain list of links when javascript is not enabled. It may not be as pretty, but it's certainly "prettier" than a completely useless form for some users.

Example #3: "Page moved" type redirects

Another pathological javascript case that crops up even when not using forms at all, is redirecting users automatically from one URL to another. It is done in javascript by

<script language="JavaScript">

location.href = "http://new/location.html";
</script>

It is broken to use a scripting language to do this, when pure HTML can do redirects just fine. Particularly since this is often used without any kind of fallback for non-javascript browsers.

I suggest using the following construct instead:

<meta http-equiv="refresh" content="0; url=http://new/location.html">
If your browser does not support meta refresh, please
<a href="http://new/location.html">click here </a>

Heck, you could even have the javascript version on the same page as well, if it makes you feel better! Even without the fallback clickable link, it will work on all browsers that support javascript, PLUS some others, PLUS sites where javascript is disallowed for security reasons.
It even works for "lynx"

Side note: the most efficient way to do a redirect is at the http conf file level, if you have access. For example, if you want to redirect ALL http traffic to the top level of your https site, you can drop the following snippet in
/etc/http/conf.d/http-redirect.conf
or equivalent:

  
  Redirect permanent / https://your.server.com

Example #4: Opening new windows

Another thing people like to use javascript for is opening windows. It's convenient, and gives you extra control to open up a window of a specific size.

However, it is perfectly possible to pull up another window WITHOUT javascript. The only downside is that the user will have to resize it by hand. But given a choice between an oversized window, and NO window, I'm sure your users would prefer having an oversized window, wouldnt you agree?

Here is the source to the above seemingly short line.


<script>

function help_window(url)
{
 window.open(url,'HelpWindow',
   'scrollbars=yes,resizable=yes,toolbar=yes,height=480,width=400');
}

document.write(
   "javascript link to <a href=javascript:help_window('http://location')>help window</a>");
</script>
<noscript>
Plain link to <a href="http://location" target=helpwin>help window</a>
</noscript>

Remember that if you dont like the large extra window popping up in pure HTML mode, you could just remove the "target=xx" attribute of the link, and have it come up in the same window. Most web surfers over the age of 3 have grasped the use of the BACK button.

Automated "US Section 508" accessibility checking

If this page has piqued your curiosity about how well a page of yours does for "accessibility" for non-full-graphics type browsers... you now have a tool to verify how it does, according to USA (legal code something) #508:

http://bobby.watchfire.com/

If you have any suggestions, comments, etc; drop me a line!
phil@bolthole.com

Bolthole.com