While working on the Vertigo.com redesign, I had the opportunity to work with some of the new ASP.NET AJAX controls. We decided to use a richer interface than static HTML, which gave me the opportunity (read: frustration) to support Firefox and Internet Explorer clients.
Over the last several years, most of my web development has been to support corporate intranet applications, where the browser was Internet Explorer. As I got to know more and more JavaScript and DHTML, I tried to keep cross-browser support in mind, even though it wasn't a requirement. The vertigo.com project showed me that despite my best efforts to keep my JavaScript agnostic, I still had a lot to learn. I'd like to list some of the things I learned here.
Checking for browser version
In all my examples, I will be checking for browser version by checking to see if the document.all property is available, which is only available in Internet Explorer.
Window/Body OnLoad
When dealing with a site that uses Master Pages, you lose some control, including the ability to declare a page specific event handler. There are ways around this, and I found that the following code example works pretty well.
<script
language="javascript"
type="text/javascript"
for="window"
event="onload">
if (document.all) { initialize(); }
else { window.document.addEventListener("DOMContentLoaded", initialize, true); }
</script>
In this case, I wrote a function on the inheriting page called initialize, which served as a typical <body
onload="initialize()"> call would perform. In Internet Explorer, the onload event for the window object works exactly like the onload event for the body object, so initialize can be called as-is. However, the behavior is different in Firefox, and you have to add an event listener to the DOMContentLoaded event instead of making a direct call since the window.onload event fires before the window content is rendered and the DOM is available.
Element Height and Width
To retrieve an element's height and width, use element.currentStyle for Internet Explorer and element.style for Firefox.
if (document.all)
{
top += parseValue(element.currentStyle.borderTopWidth);
...
}
else
{
top += parseValue(element.style.borderTopWidth);
...
}
Text Content
Retrieving the text of an element is done by using element.innerText in IE and element.textContent in Firefox.
function getText(control)
{
if (document.all)
{
return control.innerText;
}
else
{
return control.textContent;
}
}
function setText(control, value)
{
if (document.all)
{
control.innerText = value;
}
else
{
control.textContent = value;
}
}
Source Elements
To get a reference to the element that fired an event within an event handler, use event.srcElement for IE and event.target for Firefox.
function getSourceElement(event)
{
if (document.all)
{
return
event.srcElement;
}
else
{
return
event.target;
}
}
Firing Events
You can call fireEvent on an element in IE, but it's more complicated in Firefox, requiring an event to be instantiated, initialized, and dispatched.
function fireClickEvent(control)
{
if (document.all)
{
control.fireEvent("onclick");
}
else
{
var clickEvent = window.document.createEvent("MouseEvent");
clickEvent.initEvent("click", false, true);
control.dispatchEvent(clickEvent);
}
}
Window Height and Width
IE exposes the visible content area dimensions using document.body.offsetHeight and document.body.offsetWidth, whereas Firefox uses document.body.offsetWidth and window.innerWidth.
function getWindowHeight()
{
if (document.all)
{
return document.body.offsetHeight;
}
else
{
return window.innerHeight;
}
}
function getWindowWidth()
{
if (document.all)
{
return document.body.offsetWidth;
}
else
{
return window.innerWidth;
}
}
Figuring all this out took more time that I would have liked, and I hope sharing it will help others. I'm glad to get any feedback on improving these methods, and would also love to hear if anyone has anything else they'd like to share.