What is the best unobtrusive way of invoking something after the page is being loaded in plain JavaScript? Of course in jQuery I would use:

$(document).ready(function(){...});

but I am not sure about the most reliable approach in plain js.

Clearly

window.onload = ...

is not proper solution, because it would overwrite previous declaration.

What I am trying to do is to insert an iframe into a div after the page is loaded, but maybe there are actually better ways of doing it. My plan is to do something like:

window.onload = function(divId){
 var div = document.getElementById(divId);
 div.innerHTML = "<iframe src='someUrl' .. >";
}

EDIT: Apologies for not including all necessary details. The script is not for my website - the idea is to show a part of my site (a form) on external web sites. The priority is to minimize the effort someone has to put to use my code. That is why I would like to keep everything in js file and absolutely nothing in <script> - except of <script src="/code.js" />. If I change URL of an iframe or I would like to add some features, I would like to update the code on all other web sites without asking them to make any changes.
My approach might be wrong - any suggestions are very wele.

What is the best unobtrusive way of invoking something after the page is being loaded in plain JavaScript? Of course in jQuery I would use:

$(document).ready(function(){...});

but I am not sure about the most reliable approach in plain js.

Clearly

window.onload = ...

is not proper solution, because it would overwrite previous declaration.

What I am trying to do is to insert an iframe into a div after the page is loaded, but maybe there are actually better ways of doing it. My plan is to do something like:

window.onload = function(divId){
 var div = document.getElementById(divId);
 div.innerHTML = "<iframe src='someUrl' .. >";
}

EDIT: Apologies for not including all necessary details. The script is not for my website - the idea is to show a part of my site (a form) on external web sites. The priority is to minimize the effort someone has to put to use my code. That is why I would like to keep everything in js file and absolutely nothing in <script> - except of <script src="http://my.website/code.js" />. If I change URL of an iframe or I would like to add some features, I would like to update the code on all other web sites without asking them to make any changes.
My approach might be wrong - any suggestions are very wele.

• javascript
• dom-events

• 2 You've mented a couple of times that the script is ing from a different domain. If you think this is significant, put it in your question -- but I don't see any reason it would be significant. – T.J. Crowder Commented Feb 14, 2012 at 9:30

3 Answers 3

//For modern browsers:
document.addEventListener( "DOMContentLoaded", someFunction, false );

//For IE:
document.attachEvent( "onreadystatechange", someFunction);

`attachEvent` and `addEventListener` allow you to register more than one event listener for a particular target.

See: https://developer.mozilla/en/DOM/element.addEventListener

Also definitly worth looking at how jQuery does it: http://code.jquery./jquery-1.7.js Search for bindReady.

Use window.addEventListener and the events load or DOMContentLoaded:

window.addEventListener('DOMContentLoaded',function(){alert("first handler");});
window.addEventListener('DOMContentLoaded',function(){alert("second handler");});

object.addEventListener('event',callback) will insert an event listener into a queue for that specific object event. See https://developer.mozilla/en/DOM/element.addEventListener for further information.

For IE5-8 use window.attachEvent('event',callback), see http://msdn.microsoft./en-us/library/ms536343%28VS.85%29.aspx. You can build yourself a little helper function:

function addEventHandler(object,szEvent,cbCallback){
    if(typeof(szEvent) !== 'string' || typeof(cbCallback) !== 'function')
        return false;
    if(!!object.addEventListener){ // for IE9+
        return object.addEventListener(szEvent,cbCallback);
    }
    if(!!object.attachEvent){ // for IE <=8
        return object.attachEvent(szEvent,cbCallback);
    }
    return false;
}
addEventHandler(window,'load',function(){alert("first handler");});
addEventHandler(window,'load',function(){alert("second handler");});

Note that DOMContentLoaded isn't defined in IE lesser 9. If you don't know your recipient's browser use the event load.

Just put your script include at the very end of the document, immediately before or after the ending </body> tag, e.g.:

(content)
(content)
<script src="http://my.website/code.js"></script>
</body>
</html>

All of the markup above the script will be accessible via the usual DOM methods (reference). Obviously, not all ancillary resources (images and such) will be fully loaded yet, but presumably that's why you want to avoid the window load event (it happens so late).

The only real purpose of ready-style events is if you don't control where the script gets included (e.g., libraries) or you need to have something execute prior to the page load and something else after the page load, and you want to avoid having two HTTP requests (e.g., for two different scripts, one before load and one after).