Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts

    Multi onload/onunload in a single file

    The amount of new coders trying to use more than one onload / onunload in a single file is very high due to them not knowing the in and outs of javascript, so here is a function to allow more than one onload / onunload per page.

    Code:
    var addEvent = function(type,func) {
      var oldonload   = window.onload,
          oldonunload = window.onunload;
      if(type == "onload") {
        if(typeof window.onload != 'function') {
          window.onload = func;
        } else {
          window.onload = function() {
            oldonload();
            func();
          };
        }
      } else if(type == "unload") {
        if(typeof window.onunload != 'function') {
          window.onunload = func;
        } else {
          window.onunload = function() {
            oldonunload();
            func();
          };
        }
      }
      return this;
    };
    The usage of this is simple.
    Code:
    /**
     * Just like any normal window.onload there is a
     * function but as this is a function you don't need
     * to use any equals sign '=' so heres some examples
     */
    
    // Onload
    addEvent('onload',function(){alert('Hello World');});
    var secondFunc1 = function(){alert('Hello World Again');};
    addEvent('onload',secondFunc1);
    
    // Unload
    addEvent('unload',function(){alert('Hello World [unload]');});
    var secondFunc2 = function(){alert('Hello World Again [unload]');};
    addEvent('unload',secondFunc2);
    
    // Stringing example
    addEvent('onload',function(){alert('Hello World [string]');}).addEvent('onload',function(){alert('Hello World Again [string]');});
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,375
    Thanks
    11
    Thanked 592 Times in 572 Posts
    this is a very fragile solution because if someone sets window.onload directly, like you mention they like to do, all of your load events get wiped out!

    the regular addEvent should handle multiple onloads just fine, and they will still fire no matter what someone does to window.onload.

    also, don't circulate functions with the same names as popular existing functions, unless they provide the same functionality. This is a version of addEvent with only two events and no modern dom binding. it's quite long as well.


    here is the one i use: it can handle many onloads, as well as every other type of event, and it's much smaller than the code posted:

    Code:
    function addEvent( obj, type, fn ) {
    	var ename=  type.replace(/^on/i,"");
    	var resp = obj.attachEvent 	? 
    		 obj.attachEvent( "on" + ename, function(){ return fn.call(obj, window.event )}  ) : 
    		obj.addEventListener(ename, fn, false );
    	if(!resp){ obj["on"+ename] = fn; }
      return obj;
    }
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Is there anything wrong with

    Code:
    <script type="text/javascript">
    window.onload = function() {
    functionOne();
    functionTwo();
    functionThree();
    }
    </script>

  • #4
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    No lol but some developers like to keep it clean and tidey without having loads of functions inside on onload like that, it's just a small function I put together if anyone wanted to use it.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,375
    Thanks
    11
    Thanked 592 Times in 572 Posts
    Quote Originally Posted by Philip M View Post
    Is there anything wrong with

    Code:
    <script type="text/javascript">
    window.onload = function() {
    functionOne();
    functionTwo();
    functionThree();
    }
    </script>
    i don't believe in right and wrong when it come to programming but that pattern might be hard to maintain if using lots of external scripts. if an external script wanted to do something at page load, it would have to be noted in that one, hard-coded onload function.

    Using addEvent, the module can create it's own unobtrusive onload event.
    This lets modules dispatch dependencies without additional configuration.
    All this can enable more autonomous modules, and thus lower maintenance.


    that said, window.onload takes a long time to fire. onload waits for all the images, sometimes that takes a while!
    for better page performance you can usually start doing things a lot earlier: domReady is preferable.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •