Jibbering Musings

Unobtrusive javascript is beginning to be talked about more, unfortunately it’s not as easy as the proponents often talk about… For example, one of the truly excellent scripters, PPK gets it wrong on his homepage…

I was visiting his site in my regular IE6 on windows XP SP2, it’s not a default config, but it’s still an IE6, and I instantly start with a script error, before there’s any content. W3CDOM is undefined is the error, so why does this happen? Well there’s 2 reasons it could happen, W3CDOM was defined in an external script file, so if the script file wasn’t downloaded, it would indeed be undefined, or if the mime-type of the script wasn’t supported by the browser, again the script wouldn’t be executed. In fact it was the 2nd one - <script src="index.js">&ltl/script> was the code, and then the index.js file was returned with the mime-type of application/x-javascript, a mime type IE does not consider as javascript - not unreasonable, it’s an x-type and so shouldn’t be used on the web.

IE is bad in that <script type="text/javascript" src="index.js"> would’ve been executed, which is a good thing to know as it means HTML validity would’ve solved the problem for us, as the validity error of the lack of a type attribute would’ve solved the error, so if you’re going to try to write unobtrusive script, valid documents really can help! Of course that still wouldn’t've solved the problem of if the index.js wasn’t downloaded for some reason - blocked by a proxy or network failure or whatever, so the script inside the document should also make sure that it works even if the script doesn’t work. That would be easy here, use typeof to check the W3CDOM variable is defined, or go if (window.W3CDOM) or include fallback script inside the first script block.

IE also gets it wrong and accepts the file if the index.js is loaded from the cache, and not from the remote site, this means that if you’re trying to recreate this, you’ll need to clear your cache before accessing it in IE.

Incidentally, whilst we’re looking at the script http://www.quirksmode.org/index.js we can spot a few other errors (I’m highlighting purely to show how tough unobtrusive script is, you’ll be able to find lots of similar errors in my scripts!) he uses the navigator, top, document and location objects without checking they exist - none are more than a de-facto standard, and if you’re really going to make sure your script can’t error, because errors are certainly not unobtrusive! then you should perhaps check for them first. Next is the use of top.location.href - the problem here is that if the location is on another domain, even setting the location.href has been known to cause “access denied” errors in IE6, just setting top.location='/index.html' will work in all the likely browsers and doesn’t suffer this same problem.

So this post was meant to discuss The single correct use of document.write, but I’ll guess I’ll do that later, the toughness of unobtrusive javascript was the topic instead.