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 8 of 8
  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    window.onload VS <body onload=...

    If I have multipile scripts (in external js files) that end with a window.onload=[do someting], should all window.onload stuff work or just the one in the last js ?

    What would be a smart way to "accumulate" window.onload events that come from different scripts (in seperate js files) ?

    More information:
    1) I understand that in principle it is good to seperate structure from action and therfore "window.onload" is better than "BODY onload="

    2) I use Dreamweaver and use some of its built in "behaviours" which add function calls to the "BODY onLoad=". I also use other scripts that are stored in external js files and these scripts end with window.onload calls.

    3) I know that "BODY onload=" and "window.onload" don't both work on the same page.

    Thx

  • #2
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    817
    Thanks
    43
    Thanked 6 Times in 5 Posts
    From the little I understand about it, you have to combine all those window onloads into a body onload.

    <body onload="one();two();three();">

    The alternative is to do much the same thing with the window.onload:

    window.onload = function () {
    one();two();three();
    }

    But here you can see that all the calls have to be within the same external js file, which means putting them all together like stringy plasticine. Could be messy.

    So, I figure the body onload way is the best because the external js files can be left alone (except for omitting the window onload calls).

    Hope that helps, but is probably short of a complete answer.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #3
    New Coder
    Join Date
    Jan 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thx tpeck. I am looking for a more "automated" way I could use regularly. Your option means that I have to take care of each page manually.

    What I am hoping for is a way to add a line to each script that needs to initiate something "onload" and then make one "window.onload" call. The logic should be something like
    "window.onload = window.onload + newFunction()" but I don't know what the syntex needs to be...

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,502
    Thanks
    3
    Thanked 500 Times in 487 Posts
    window.onload = function () {
    one();two();three();
    }
    the calls in tpecks example CAN be in different external JS files.

    Once the files are loaded they can all be considered as part of the page.


    As you recognise the current thinking is that a widow on load is best because
    as you say
    good to seperate structure from action and the
    However most of the widow onload event are constructed as tpecks example which can catch out inexpertienced codes using cut and past scripts as an onload in one script overwrites an onload in another.

    In summery its down to your priorities, conformance to 'standards' or 'keep it simple keep it safe' approach. I use either dependent on the application.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New Coder
    Join Date
    Jan 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    None of the above really answered my need. I did find a solution that is reusable and decent but it would take long to explain... Feel free to PM me if you would like the details and I'll post them here.

  • #6
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    817
    Thanks
    43
    Thanked 6 Times in 5 Posts
    I'm not surprised, since in my experience, a global solution doesn't always suffice. I've seen ways to try to offer an easy way out but they have always failed me. It depends on what you are doing.

    I reckon we should always try first to do it by body.onload. If that doesn't work, try the window.onload suggestions given in this thread.

    If that doesn't work, try a global solution but don't expect it to always work.

    There are really crazy things going on in this area (of course, there is a good reason for everything). For instance, ...

    Why does this work?

    Code:
    <body onload="hm();mySoundObj1.TGotoAndPlay('/clk1','start');" onunload="sm();" background="../img/bg/bgggreylines.gif">
    <div id="watermarklogo" style="position:absolute;"></div>
    <script language="javascript">
    <!--
    var logowidth=85
    var logoheight=18
    var logoimage=new Image(logowidth,logoheight)
    logoimage.src="../img/next2.gif"
    var alttext="Click Here"
    var visibleduration=0
    var Hoffset=11
    var Voffset=39
    
    var ie=document.all&&navigator.userAgent.indexOf("Opera")==-1
    
    var watermark_obj=ie? document.all.watermarklogo : document.getElementById? document.getElementById("watermarklogo") : document.watermarklogo
    
    function insertimage(){
    if (ie||document.getElementById)
    watermark_obj.innerHTML='<a href="test2n.html" target="_self"><img src="'+logoimage.src+'" width="'+logowidth+'" height="'+logoheight+'" border=0 alt="'+alttext+'"></a><br><a href="test2l.html" target="_self"><img src="../img/prev2.gif" width="85" height="18" alt="Click Here" title="Click Here" border="0" align="middle"></a>';
    else if (document.layers){
    watermark_obj.document.write('<a href="test2n.html" target="_self"><img src="'+logoimage.src+'" width="'+logowidth+'" height="'+logoheight+'" border=0 alt="'+alttext+'"></a><br><a href="test2l.html" target="_self"><img src="../img/prev2.gif" width="85" height="18" alt="Click Here" title="Click Here" border="0" align="middle"></a>');
    watermark_obj.document.close();
    }
    }
    
    function positionit(){
    var dsocleft=ie? document.body.scrollLeft : pageXOffset
    var dsoctop=ie? document.body.scrollTop : pageYOffset
    var window_width=ie? document.body.clientWidth : window.innerWidth-20
    var window_height=ie? document.body.clientHeight : window.innerHeight
    
    if (ie||document.getElementById){
    watermark_obj.style.left=parseInt(dsocleft)+parseInt(window_width)-logowidth-Hoffset
    watermark_obj.style.top=parseInt(dsoctop)+parseInt(window_height)-logoheight-Voffset
    }
    else if (document.layers){
    watermark_obj.left=dsocleft+window_width-Hoffset-logowidth
    watermark_obj.top=dsoctop+window_height-logoheight-Voffset
    }
    }
    
    function hidewatermark(){
    if (document.layers)
    watermark_obj.visibility="hide"
    else
    watermark_obj.style.visibility="hidden"
    clearInterval(watermarkinterval)
    }
    
    function beingwatermark(){
    watermarkinterval=setInterval("positionit()",50)
    insertimage()
    if (visibleduration!=0)
    setTimeout("hidewatermark()",visibleduration*1000)
    }
    
    if (ie||document.getElementById||document.layers)
    window.onload=beingwatermark(); // don't know why this onload works - it shouldn't, but it produces the images required 
    //  End -->
    </script>
        <div align="center">
    Forget what it does, and don't try to answer it (I value your time!), but it is the only way I can get all these onloads (three of them) working. But everyone believes a body onload always prevents a windows.onload from happening. Big BS obviously.

    Nothing I have read anywhere really explains it - but, of course, an explanation is out there somewhere.

    Anyhow, if you can be bothered, love to see your solution!
    Last edited by tpeck; 01-30-2007 at 12:07 PM.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #7
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    One possible solution might involve namespacing the window.onload method.
    This would enable you to add window.onload type events in multiple js files without risk of conflict.

    As the very first piece of code in your first js file...
    Code:
    var libJS = {
    
    	addEvent: function(obj,type,fn) {
    
    		if (obj.addEventListener) {
    			obj.addEventListener(type,fn,false);
    			return true;
    		} else if (obj.attachEvent) {
    			obj['e'+type+fn] = fn;
    			obj[type+fn] = function() { obj['e'+type+fn](window.event);}
    			var r = obj.attachEvent('on'+type, obj[type+fn]);
    			return r;
    		} else {
    			obj['on'+type] = fn;
    			return true;
    		}
    
    		}
    
    }
    Once that's in, you can add window.onload events in other js files as follows.

    e.g.
    Code:
    libJS.addEvent(window,'load',func1);
    
    libJS.addEvent(window,'load',func2('blah'));

  • #8
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    817
    Thanks
    43
    Thanked 6 Times in 5 Posts
    My goodness! I never fail to be impressed!

    Thanks!
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)


  •  

    Posting Permissions

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