SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 scripts using window.onload in same html page

    These two lines are in the head section:

    <script src="main.js" type="text/javascript"></script>
    <script src="gdpmap.js" type="text/javascript"></script>

    They both run scripts on window.onload. The script in main.js no longer works. I guess because gdpmap.js's window.onload is overriding the previous one.

    So to fix this I suppose I can put the script inside of gdpmap.js inside of main.js and write something like:

    window.onload = init;

    function init(){
    startFuctionOne();
    startFunctionTwo();
    )

    but the issue with that is main.js is on every page in the site. gpdmap.js only applies to one page. I think if I consolidate them this way all html pages except the one that gdpmap.js applies would have errors in it because the script would be looking for objects (with id's) that don't exist (i think). If I consolidate the other way I'll be potentially updating 2 files with the same script in it. Are there any other choices?

  2. #2
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I may not use the correct verbiage here, but is this when an event listener is better than an event handler. Is it true that more than on function can be attached to the same listener?

  3. #3
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it working, but thanks for looking.

  4. #4
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can also have a look at addLoadEvent or use a library to add events.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Instead of puzzling your way through window.onload techniques, you can do without them completely and place the init code at the end of the body. Putting scripts at the bottom of the page is one of the best practices to speed up your web site.

    Code html4strict:
    <html>
    <head>
    </head>
    <body>
    <script src="/js/script.js"> </script>
    </body>
    </html>

    Code javascript:
    function init() {
        startFuctionOne();
        startFunctionTwo();
    }
    init();

    You can even make the function self-invoking as follows:

    Code javascript:
    (function init() {
        startFuctionOne();
        startFunctionTwo();
    })();

    Edit: script changed from inline to external
    Last edited by paul_wilkins; Oct 27, 2008 at 21:04.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hm, let me add a line to your code to see if I understand:

    <html>
    <head>
    </head>
    <body>
    <-- all rendered content would go here? -->
    .
    .
    <script>
    ...
    </script>
    </body>
    </html>

    If this is faster (for at least one reason) because there are fewer files downloaded I get it. But do people really code this way? I feel like everything I've read until now suggests to put all scripts in external files.

  7. #7
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I disagree with putting the <script> tag inside of the <body> tag. This will trigger the scripts loading prior the complete DOM tree being initialized. If you're going to put it at the bottom of the page, I'd place it outside of the </body> tag yet before the </html> tag.

    Nevertheless, I still feel as though it's kind of "taboo" to do this. This will require any commonly included scripts to have to be placed on the bottom of EVERY page. Say you suddenly realize "oh snap! this function is friggin buggy"--you'd then have to go edit every HTML file that had that function written in it. Where as if it were in an external file, you'd only have to edit it once.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The script content shouldn't be inline. You should always use external script files. I apologise to anyone who received the impression that inline scripts were being implied. That is certainly not the case.

    The original message has been edited to clear up any such misunderstanding.

    Now, on with helping scripts to load faster and to be able to modify the page with great ease. It's not valid to place script tags outside of the head or the body. This is why the best practice is to put scripts at the bottom, just before the </body> tag.

    When the browser parses the script, all DOM elements that came before the script are available. There is no requirement for the DOM tree to be complete before you start working with it, especially in the manner of adding events to page elements.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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