Take the 2-minute tour ×

How to add onload event to a div?

I've read this, despite this I have a problem.. I know there's no onLoad for divs, but I should be able to execute a snippet like so:

<div id="content">
    <div class="text">
<script type="text/javascript">
    navigate('main.php', 'content');

This doesn't work, if I start a new browser session and navigate to index.php, it shows me a login window. After logging in it redirects me to index.php but with some session variables and cookies set. Now index.php contains the code above, prior to this content didn't exist.

Now to my issue: it appears as if most browsers refuses to accept that content exists, in the navigate function I've got:

function navigate(str, what) {
    if(what == null) {
        what = document.documentElement;
    } else {
        what = document.getElementById(what);

what will become null because it's a not a valid Element at the moment of execution.

I've tried:

window.onLoad = naviate('main.php', 'content');

Which does nothing, same issue there.. Also tried putting the <script> block at the end without luck.

I can't use jQuery or anything so please keep it to standard Javascript, HTML and CSS. Browsers in use: IE8, Chrome, FireFox.

  1. Load index.php
  2. Login to loginwindow
  3. Load index.php
  4. Upon completed load of index.php, read all elements including content
  5. Update content with some AJAX data.

It works if

I login, load the page once with unsuccessful result and then refresh the page again.

And here's the reason why:

I use AJAX on the login window as well, it uses navigate() just as all my buttons and what not does. So the issue is that index.php gets loaded, with a login window, that login window updates the entire page with AJAX (javascript) which in turn, tries to call navigate() again from within the return data from the AJAX call... The "inline" navigate() gets called!!!, it's just that it doesn't know all the elements because it's load via AJAX.

share|improve this question

2 Answers 2

up vote 0 down vote accepted

Try this :

window.onload = function(){
    navigate('main.php', 'content');
share|improve this answer
(I've tried it but) that makes no difference, navigate(..) is still being called as it should, problem is still that it's executed before the browser is aware of content, which renders a null value. –  Torxed Feb 10 '13 at 14:58
is content created dynamically ? –  Frederik.L Feb 10 '13 at 15:00
Yepp, it is. This is what probably confused both my answers. Updated the question accordingly. –  Torxed Feb 10 '13 at 15:03
I've also tried a delay timer, which, some what helps but still not enough. –  Torxed Feb 10 '13 at 15:04
In this case your ajax script should allow a callback after he is finish. 1-load content, 2-interact with content –  Frederik.L Feb 10 '13 at 15:13

According to my tests you can get div element by .getElementById even before the page is loaded.
Do not forget that the navigate function must be defined before it is called. So if you have your scripts at the end of document (which is correct), you must call the function after execution of theese scripts.

But anyway, you've assigned the .onload function wrongly. Do it like this:

window.onload = function(event) {
                /*any script here*/

Or like this:

function load(event) {
                /*any script here*/
window.onload =load;
share|improve this answer
As commented on the other solution, i've tried this already. Same effect, the issue is not that navigate(...) isn't called, because it is. The issue is that window.onload tries to access content. I'll update my question to REALLY explain the issue. –  Torxed Feb 10 '13 at 15:01
Then the issue is somewhere else. I made you a simple script to prove that, if everything is done how you state it, the script works. –  Tomáš Zato Feb 10 '13 at 15:15
Unfortunatelly, my hosting (unlike localhost) buffers output, so you cannot se the content div filled 3 seconds before page is loaded. –  Tomáš Zato Feb 10 '13 at 15:20

Your Answer


