title: window.onload in external script gets ignored in Javascript
body: <p>index.html
  </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="foo.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  window.onload = function() {
      console.log("hello from html");
  };
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="bar"&gt;bar&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>foo.js
  </p>
  
  <pre><code>// this js file will be completely ignored with window.onload
  //window.onload = function() {
  
      console.log("hello from external js");
  
      var bar = document.getElementsByClassName("bar");
  
      // this returns 0 instead of 1
      console.log(bar.length);
  //};
  </code></pre>
  
  <ol>
  <li>When <code>window.onload</code> is used in html, <code>window.onload</code> from external js will be ignored.</li>
  <li>When <code>window.onload</code> from external js is commented out, <code>bar.length</code> returns 0.</li>
  <li>When <code>window.onload</code> from html is removed, <code>window.onload</code> from external js works fine.</li>
  </ol>
  
  <p>Can anyone explain why I can't use both <code>window.onload</code>?</p>
  
  <p>If I <strong>had to</strong> use <code>window.onload</code> in html, how do tell if window is loaded from external js?</p>