I know I can use different frameworks like prototype or jQuery to attach a function to the window.onload, but's not what I'm looking for.
I need something like .readyState so that I can do something like this:
if(document.isReady){
var id = document.getElem ...
}
is there any other way than using what the frameworks do?
While I usually advocate avoiding using frameworks unless necessary, I'd say using one in this case is perfectly fine. Here's jQuery:
$(function () {
// do stuff after DOM has loaded
});
Note that it is NOT the same as an window.onload event, since onload executes first after other resources have been loaded (images etc.) The code I used in my example will execute when the DOM has finished loading, i.e., when the full HTML structure is available (not necessarily when images, CSS, etc. is available.)
If you want a checkable variable, you can set one in the ready-function:
var documentIsReady = false;
$(function () { documentIsReady = true; });
Of course you can find even more light-weight libraries than jQuery if all you want to do is to check for DOM-ready. But use a library in cases where different browsers behave very differently (this is one such case.)
Using some code from the DOMAssistant library, making your own "DOM is ready" function shouldn't be too hard:
var domLoaded = function (callback) {
/* Internet Explorer */
/*@cc_on
@if (@_win32 || @_win64)
document.write('<script id="ieScriptLoad" defer src="//:"><\/script>');
document.getElementById('ieScriptLoad').onreadystatechange = function() {
if (this.readyState == 'complete') {
callback();
}
};
@end @*/
/* Mozilla, Chrome, Opera */
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', callback, false);
}
/* Safari, iCab, Konqueror */
if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {
var DOMLoadTimer = setInterval(function () {
if (/loaded|complete/i.test(document.readyState)) {
cTry this:
Link: onDomReady at GitHub
or the source below:
if(document.ondomready == undefined) {
document.ondomready = {};
document.ondomready = null;
} else {
document.ondomready=document.ondomready;
}
var oldonload=document.onload;
var isLaunched = 0;
document.onload = function() {
if(oldonload !== null) {
oldonload.call();
}
};
document.addEventListener("DOMContentLoaded", function onDom(evt) {
var olddomready = document.ondomready;
if(olddomready !== null) {
if(isLaunched == 0) {
olddomready.call(evt);
isLaunched == 1;
//We now launched the mapped DOMContentLoaded Event
} else {
//We already launched DOMContentLoaded Event
}
}
}, false);
I've already tested this on Opera 11.x/12.x. Not yet tested on others. Let me know if they do.
Note: I haven't yet uploaded the repository, but I will soon in my spare time.