Page 1 of 1

Unobtrusive Javascript - body onload

Posted: Thu Oct 19, 2006 1:27 pm
by Luke
Hello... I've got a couple javascript functions that I would like to be executed on page load. I do not, however want to use <body onload="blabla">. Here's what I have right now, but it only allows one function to be executed. Isn't there a way to attach more events to body onload? Thanks guys. I'd consult my javascript book, but I forgot it today:

Code: Select all

 window.onload = function(){
 	Map = new UCA_Map('map', [39.69873414348139, -122.0745849609375]);
	
	var map = Map.map;
	  // ====== Restricting the range of Zoom Levels =====
	  // Get the list of map types      
	  var mt = map.getMapTypes();
	  // Overwrite the getMinimumResolution() and getMaximumResolution() methods
	  for (var i=0; i<mt.length; i++) {
		mt[i].getMinimumResolution = function() {return 8;}
	  }
	  // Add a move listener to restrict the bounds range
	  GEvent.addListener(map, "move", function() {
		checkBounds();
	  });
	  
	  // The allowed region which the whole map must be within
	  var allowedBounds = new GLatLngBounds(new GLatLng(37,-123), new GLatLng(41,-119.5));
	  
	  // If the map position is out of range, move it back
	  function checkBounds() {
		// Perform the check and return if OK
		if (allowedBounds.contains(map.getCenter())) {
		  return;
		}
		// It`s not OK, so find the nearest allowed point and move there
		var C = map.getCenter();
		var X = C.lng();
		var Y = C.lat();

		var AmaxX = allowedBounds.getNorthEast().lng();
		var AmaxY = allowedBounds.getNorthEast().lat();
		var AminX = allowedBounds.getSouthWest().lng();
		var AminY = allowedBounds.getSouthWest().lat();

		if (X < AminX) {X = AminX;}
		if (X > AmaxX) {X = AmaxX;}
		if (Y < AminY) {Y = AminY;}
		if (Y > AmaxY) {Y = AmaxY;}
		//alert ("Restricting "+Y+" "+X);
		map.setCenter(new GLatLng(Y,X));
		
	}
 }
 window.onunload = function(){
	GUnload();
 }

Posted: Thu Oct 19, 2006 1:55 pm
by nickvd
What About:

Code: Select all


function initMap(){}
function initOtherThing(){}

window.onload = function(){
initMap();
initOtherThing();
}
?

Posted: Thu Oct 19, 2006 1:56 pm
by Luke
this is what I was looking for...

Code: Select all

function addEvent(obj, evType, fn){ 
 if (obj.addEventListener){ 
   obj.addEventListener(evType, fn, false); 
   return true; 
 } else if (obj.attachEvent){ 
   var r = obj.attachEvent("on"+evType, fn); 
   return r; 
 } else { 
   return false; 
 } 
}
addEvent(window, 'load', foo);
addEvent(window, 'load', bar);
thanks anyway!!

old skool!

Posted: Sun Nov 05, 2006 1:23 pm
by Popcorn
All this object business and browser sniffing to see if obj.addEventListener exists .... plus it would appear that the processing order is not guaranteed:

http://www.w3.org/TR/2000/REC-DOM-Level ... flow-basic
Although all EventListeners on the EventTarget are guaranteed to be triggered by any event which is received by that EventTarget, no specification is made as to the order in which they will receive the event with regards to the other EventListeners on the EventTarget.
so if you want your listeners performed in a specifc order then you're out of luck.

A basic version of an alternative (you can abstract further for more flexibility):

Code: Select all

//An event passes the event object to each event handling fn automagically as the sole argument.
//Because of the eval, line(s) of code can also be executed, no needs for fns.
window.onload = function (e) {
   for (var i=0,ii=onload_fns.length; i<ii; i++)
      if (onload_fns[i])
         eval(onload_fns[i] + (';'==onload_fns[i].charAt(onload_fns[i].length-1) ? '' : ';'));
}
//The array of fns to execute on the 'load' event.
var onload_fns = [];
//Define your event 'handling' function.
function myfn (n,e,m) { alert("event type was "+e.type+ " and myfn works " + (m*n)); }
//Add/register your fn.
onload_fns.push("myfn(4,e,5)");
It uses relatively safe old javascript and your events will be in your order which can be adjusted by manipulating the fns array (ok, so you might need some array functions handy).

Anyway, it's different.

Posted: Sun Nov 05, 2006 1:31 pm
by Maugrim_The_Reaper
If order is a concern, one could add one event listener, a function which handles a FIFO queue of event calls to ensure correct order...