Saturday, February 16, 2008

Adding Scripts to others' web pages: a few thoughts

There could be problems doing things like document.body.appendChild when there DOM hasn't loaded yet.
Therefore you need to do things to watchout for that

< body onload = "customfunction()" >

or put script tags right before body

or window.onload =

or window.attachevent("onload",customfunction)
window.addeventlistener("load",customfunction,false) //or true I dont know

What about large images etc. that you dont want to wait for

another thing to research is the defer attribute of the script tag

another thing to research is the DOMContentLoaded

http://developer.mozilla.org/en/docs/Gecko-Specific_DOM_Events
"Fired on a Window object when a document's DOM content is finished loaded, but unlike "load", does not wait till all images are loaded. Used for example by GreaseMonkey to sneak in to alter pages before they are displayed. "

what about document.write

http://www.hedgerwow.com/360/dhtml/ie-dom-ondocumentready.html

unobtrusive javaScript

2 comments:

Donovan Mueller said...

jQuery makes it really simple by allowing all code to be within $(document).ready(function(){ /* code here */ });

And you can do as many of those as you please. Also isolates your code for great portability and mixing with other scripts.

Drew LeSueur said...

Thanks for the advice!