Jump to content

Multiple Window.onload Functions


jlhaslip
 Share

Recommended Posts

I have scanned the Tutorials, and searched this Forum, and can't seem to figure out a way to arrange for two javascrpt functions to be called on window load. One is for clearing a textarea on-click and the other is for providing icons for links from the site's favicon.Both of the scripts are posted below:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>	<title>js demo</title>	<script type="text/javascript">window.onload = function() {	if (document.getElementById("inp_search")) {	var s = document.getElementById("inp_search");	var v = s.defaultValue;	s.onfocus = function() {if(s.value==v) s.value='';}	s.onblur= function() {if(s.value=='') s.value=v;}	}	}	</script>     </head>  <body>	<form action="">	  <input type="text" id="inp_search" name="search" value="Search...">	</form>  </body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><!-- Source is http://www.askthecssguy.com/examples/faviconcues/faviconizealltext.html --><head>	<title>Hyperlink Cues with Favicons</title><script type="text/javascript">function addLoadEvent(func) {  var oldonload = window.onload;  if (typeof window.onload != 'function') {	window.onload = func;  } else {	window.onload = function() {	  oldonload();	  func();	}  }}function insertAfter(newElement,targetElement) {  var parent = targetElement.parentNode;  if (parent.lastChild == targetElement) {	parent.appendChild(newElement);  } else {	parent.insertBefore(newElement,targetElement.nextSibling);  }}function faviconize() {   if (!document.getElementsByTagName) return false;  if (!document.createElement) return false;  var links = document.getElementsByTagName("a");	  for (var j=0; j<links.length; j++) {		  var hoststring = /^http:/;		  var hrefvalue = links[j].getAttribute("href",2);		if (hrefvalue.search(hoststring) != -1) {			var domain = hrefvalue.match(/(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)/);			domain = RegExp.$2;			var cue = document.createElement("img");			cue.className = "faviconimg";			var cuesrc = "http://"+domain+"/favicon.ico";			cue.setAttribute("src",cuesrc);			cue.onerror = function () {				this.src = "external.gif";				}			insertAfter(cue,links[j]);		}	}}addLoadEvent(faviconize);</script><style type="text/css">p, li {font:normal 12px/18px arial;}h1		{font:bold 22px/28px arial;}h2		{font:bold 16px/20px arial;}.wrap {width:500px;}img.faviconimg {	border:0;	width:11px;	height:11px;	padding:0 4px;}ul.favilist {list-style:none;}</style></head><body><div class="wrap"><h1>Example of Hyperlink Cues with Favicons</h1><p>On this page, the javascript looks for every link on the page to see if the href starts with "http:", which would indicate that it's an external link.  If so, it grabs the favicon off that domain name and inserts it after each link.  If no favicon exists, it uses a locally stored image (<img src="faviconizealltext_files/external.gif" alt="external gif here" />) to indicate the link is external.</p><p>I hate <a href="http://en.wikipedia.org/wiki/Edna_Garrett">Edna Garret</a>.  Some television shows are worse than the <a href="http://www.slate.com/id/2156187/fr/flyout">commercials</a> that sponsor them.  Anybody as sick of <a href="http://abc.go.com/">Lost</a> as I am?  Here is an example link to a <a href="nodiggity.pdf">local file</a>, though no file exist, and the link does not start with http.  Here's a site <a href="http://www.reasonstation.net/">http://www.reasonstation.net/</a> with no favicon.</p></div></body></html>

Any assistance would be appreciated. Javascript is a weakness of mine. I've never really had to use it before and thease are cut and paste scripts which work fine if they are on the page alone, but I would like to have them on the same page.thanks for your assistance.

Edited by jlhaslip
Link to comment
Share on other sites

One solution would be two call both of your functions in a third function which is assigned as the handler.

function one(){	alert("one");}function two(){	alert("two");}function init(){	one();	two();}window.onload = init;

Link to comment
Share on other sites

You've got this function included in the second chunk:

function addLoadEvent(func) {  var oldonload = window.onload;  if (typeof window.onload != 'function') {	window.onload = func;  } else {	window.onload = function() {	  oldonload();	  func();	}  }}

That's all you need to use to add multiple load events. That function checks if the window.onload event is already a function, and, if so, saves it as the oldonload function. Then it sets a new onload function to run the old onload (if applicable), then the new onload. You can use it to add as many load events as you want. It will run the functions in the order that you add them.

addLoadEvent(faviconize);addLoadEvent(function() {  if (document.getElementById("inp_search")) {	var s = document.getElementById("inp_search");	var v = s.defaultValue;	s.onfocus = function() {if(s.value==v) s.value='';}	s.onblur= function() {if(s.value=='') s.value=v;}  }});addLoadEvent(function() { alert("loaded"); });

Link to comment
Share on other sites

Okie Dokie... Thanks for the answers. I knew it wouldn't be too tough.I'll try them out tonight after the hockey game... Vancouver at Chicago. Should be a good one.And I really need to get into some JS sometime soon, I suppose.... Thanks again.

Link to comment
Share on other sites

  • 1 year later...
You've got this function included in the second chunk:
function addLoadEvent(func) {  var oldonload = window.onload;  if (typeof window.onload != 'function') {	window.onload = func;  } else {	window.onload = function() {	  oldonload();	  func();	}  }}

That's all you need to use to add multiple load events. That function checks if the window.onload event is already a function, and, if so, saves it as the oldonload function. Then it sets a new onload function to run the old onload (if applicable), then the new onload. You can use it to add as many load events as you want. It will run the functions in the order that you add them.I would like to ask where I can add in the functions I want to load??? Thanks!

Edited by Tin
Link to comment
Share on other sites

Look at the examples:

addLoadEvent(faviconize);addLoadEvent(function() {  if (document.getElementById("inp_search")) {	var s = document.getElementById("inp_search");	var v = s.defaultValue;	s.onfocus = function() {if(s.value==v) s.value='';}	s.onblur= function() {if(s.value=='') s.value=v;}  }});addLoadEvent(function() { alert("loaded"); });

Link to comment
Share on other sites

Look at the examples:
addLoadEvent(faviconize);addLoadEvent(function() {  if (document.getElementById("inp_search")) {	var s = document.getElementById("inp_search");	var v = s.defaultValue;	s.onfocus = function() {if(s.value==v) s.value='';}	s.onblur= function() {if(s.value=='') s.value=v;}  }});addLoadEvent(function() { alert("loaded"); });

Is that every time I add a function like this:addLoadEvent(function() {func1); });addLoadEvent(function() {func2); });And it will execute func1 and func2?
Link to comment
Share on other sites

You can just do this:addLoadEvent(func1);
It works. Thanks.I altered it a bit with some reference to other tutorials:addLoadEvent( function() {func1(); func2();});So that it can execute multiple functions. But I still can't figure out why you guys wrote the scripts in addLoadEvent. Maybe as long as my knowledge of JS is built, I will get it thru some day.
Link to comment
Share on other sites

If you want 2 functions, you can do this:addLoadEvent(func1);addLoadEvent(func2);That's the point of that function, to let you run multiple things on startup.
Yes, it is exactly what it should work like.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...