Harnessing The Power of Standards: The DOMWindow
By Scott Andrew LePera
November 19, 2000 | Printer-friendly version
Introduction
With the final release of Netscape 6 and resulting hullabaloo over it's lack of backward-compatibility, I thought it would be a good time to demonstrate exactly what a standards-compliant browser could do with a little coding ingenuity.
But demonstrate what, exactly? I didn't want to do a simple hide and show demo, or yet another collapsing-tree menu. Bah. I wanted something a little sexier, something that couldn't be done in a browser that didn't support standards. That meant that it had to work only in Netscape 6, Mozilla, and Internet Explorer 5.
So after a few hours of tinkering, I came up with my latest creation: the DOMWindow. Click here to see the finished product. Sorry, NS4 and IE4 users, you'll need one of the aforementioned browsers to see it work.
The DOMWindow is pretty skeletal; I didn't add features like buttons and resizing. But it would be a simple matter to add these and other features to it and end up with a very robust DHTML object that could possibly be used for web applications. You're welcome to grab the source code and do just that, if you wish.
In creating the DOMWindow, I wanted to accomplish several things:
- demonstrate the sheer power of the DOM, particularly the ability to create HTML elements out of thin air
- use a minimum of cross-browser scripting
- show how to use basic CSS properties to provide "skin" for the DOMWindow
- create reusuable code that could be extended and built upon
What follows is a step-by-step review of how I went about creating the DOMWindow code. It only took about two hours, with my only reference being my own article, Scripting For the 6.0 Browsers (although you can find many good references on this page as well).
Let's get started.