how to use window.onload?

Question

I'm refactoring a website using MVC. What was a set of huge pages with javascript, php, html etc etc is becoming a series of controllers and views. I'm trying to do it in a modular way so views are split in 'modules' that I can reuse in other pages when needed

eg. "view/searchform displays only one div with the searchform "view/display_events displays a list of events and so on.

One of the old pages was supposed to load a google map with a marker on it.

Amongst the rest of the code, I can identify the relevant bits as follows

<head>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=blablabla" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
function load() {
    if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        var point = new GLatLng(<?php echo ($info->lat && $info->lng) ? $info->lat .",". $info->lng : "51.502759,-0.126171"; ?>);
        map.setCenter(new GLatLng(<?php echo ($info->lat && $info->lng) ? $info->lat .",". $info->lng : "51.502759,-0.126171"; ?>), 15);
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        map.addOverlay(new GMarker(point));
        var marker = createMarker(point,GIcon(),"CIAO");
        map.addOverlay(marker);
    }
}
//]]>
</script>
</head>

...then

<body onload="load()" onunload="GUnload()">

...and finally this div where the map should be displayed

<div id="map" style="width: 440px; height: 300px"> </div>

Don't know much about js, but my understanding is that

a) I have to include the scripts in the view module I'm writing (directly in the HTML? I would prefer to load a separate script)

b) I have to trigger that function using the equivalent of body onload... (obviously there's no body tag in my view. In my ignorance I've tried div onload=.... but didn't seem to be working :)

What do you suggest I do? I've read about window.onload but don't know what's the correct syntax for that.

please keep in mind that other parts of the page include other js functions (eg, google adsense) that are called after the footer.

Crescent Fresh · Accepted Answer · 2010-04-07 20:06:45Z

3

You can attach a handler to the window load event with js, so you don't need the markup.

// crossbrowser event binding from http://www.quirksmode.org/js/eventSimple.html
//function addEventSimple(obj,evt,fn) {
//    if (obj.addEventListener)
//      obj.addEventListener(evt,fn,false);
//    else if (obj.attachEvent)
//      obj.attachEvent('on'+evt,fn);
//}

// using Google API's event functions
GEvent.addDomListener(window, "load", load);
GEvent.addDomListener(window, "unload", GUnload);

function load() {
    // your load function
}

Drop that in a script tag on your view and the load function will be called once the window is loaded.

The google API probably also provides a way to attach the load event, but I'm not familiar with it.

edited Apr 7, 2010 at 20:06

Crescent Fresh

117k27 gold badges157 silver badges140 bronze badges

answered Apr 7, 2010 at 15:35

Joel

19.4k3 gold badges67 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Patrick Over a year ago

I was doing some experiments and I found a possible solution (or at least it seems to be working! :) I've moved the main script in the MAP div, then added at the end of the script itself two more lines: load(); to call the function, and GUnload(). So basically the functions that were called onload and onunload are called directly. It seems to be working, but I have NO idea if this is just luck and can cause problems - what do you think?

Joel Over a year ago

@Patrick, That may be sufficient depending on what the google API actually does. When you write it that way, the scripts will be executed before the page is done loading (they will also block the loading until they are done executing). By putting it on the load event, the map load would be done asynchronously.

Patrick Over a year ago

Your solution seem to work Joel. Is there a way I can put the whole script in a JS file and call it with script src='...'? I need to pass it some variables though, the ones that in the script above are generated by php - how can i do it?

Joel Over a year ago

@Patrick, Yes, you can put it in a script file. On your view you will still need to setup a variable var latLong = <?php echo ($info->lat && $info->lng) ? $info->lat .",". $info->lng : "51.502759,-0.126171"; ?>;, and then in your script file just use latLong instead of the php.

Crescent Fresh Over a year ago

Side note: this addEventSimple implementation is already encapsulated by GEvent.addDomListener (code.google.com/apis/maps/documentation/…) which is available to the OP by virtue of including the Google maps api. The OPs code sample also includes onunload which is encapsulated by GEvent.removeListener.

|

Collectives™ on Stack Overflow

how to use window.onload?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related