Unobtrusive Javascript - body onload

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Unobtrusive Javascript - body onload

Post 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();
 }
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

What About:

Code: Select all


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

window.onload = function(){
initMap();
initOtherThing();
}
?
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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!!
User avatar
Popcorn
Forum Commoner
Posts: 55
Joined: Fri Feb 21, 2003 5:19 am

old skool!

Post 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.
User avatar
Maugrim_The_Reaper
DevNet Master
Posts: 2704
Joined: Tue Nov 02, 2004 5:43 am
Location: Ireland

Post 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...
Post Reply