JavaScript event [removed] not triggered

后端 未结 8 1041
无人及你
无人及你 2021-02-01 01:15

I\'ve got the following code in a website:

 window.onload = resize;
 window.onresize = resize;

 function resize(){
  heightWithoutHeader = (window.innerHeight -         


        
相关标签:
8条回答
  • 2021-02-01 01:34

    Move the window.onload line to the end of the javascript file or after the initial function and it will work:

    function resize(){
        heightWithoutHeader = (window.innerHeight - 85) + "px"; 
        document.getElementById("main-table").style.height = heightWithoutHeader;
        document.getElementById("navigation").style.height = heightWithoutHeader;
    }
    // ...
    // at the end of the file...
    window.onload = resize;
    window.onresize = resize;
    

    But it's a best practice if you don't replace the onload too. Instead attach your function to the onload event:

    function resize(){
        heightWithoutHeader = (window.innerHeight - 85) + "px"; 
        document.getElementById("main-table").style.height = heightWithoutHeader;
        document.getElementById("navigation").style.height = heightWithoutHeader;
    }
    // ...
    // at the end of the file...
    window.addEventListener ? 
        window.addEventListener("load",resize,false) 
        : 
        window.attachEvent && window.attachEvent("onload",resize);
    

    That worked for me and sorry for my english.

    0 讨论(0)
  • 2021-02-01 01:38

    This works for me, i think your problem is somewhere else:

     function resize(){
      var tester = document.getElementById("tester"),
          html = tester.innerHTML
    
      tester.innerHTML = html + "resize <br />"
     }  
    
    window.onload = resize;
    window.onresize = resize;
    

    you can test it yourself here: http://jsfiddle.net/Dzpeg/2/

    are you sure its the only event called onLoad ? Maybe an other onLoad event creates a conflict

    0 讨论(0)
  • 2021-02-01 01:38

    If it's really in that order, it's definitely not going to work. You can't assign a function to an event handler before the function itself is declared.

    0 讨论(0)
  • 2021-02-01 01:39

    This answer is for those who came here because their window.onload does not trigger.

    I have found that for the following to work

    window.onload = myInitFunction;
    

    or

    window.addEventListener("load", myInitFunction);
    

    the referred function (myInitFunction in this case) must reside (or be defined) within the same <script>-element or in a <script>-element that occurs before the <script>-element where the onload event is established. Otherwise it will not work.

    So, this will not work:

    <html>
      <head>
        <title>onload test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
        <script>
          window.addEventListener("load", myInitFunction)
        </script>
    
        <script>
          function myInitFunction() {
            alert('myInitFunction');
          }
        </script>
    
      </head>
      <body>
        onload test
      </body>
    </html>
    

    But this will work:

    <html>
      <head>
        <title>onload test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
        <script>
          function myInitFunction() {
            alert('myInitFunction');
          }
        </script>
    
        <script>
          window.addEventListener("load", myInitFunction)
        </script>
    
      </head>
      <body>
        onload test
      </body>
    </html>
    

    And this will work (since we only have one <script>-element):

    <html>
      <head>
        <title>onload test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
        <script>
          window.addEventListener("load", myInitFunction)
    
          function myInitFunction() {
            alert('myInitFunction');
          }
        </script>
    
      </head>
      <body>
        onload test
      </body>
    </html>
    

    If you for some reason have two <script>-elements and cannot (or do not want to) merge them and you want the onload to be defined high up (i.e. in the first element), then you can solve it by

    instead of writing

    window.onload = myInitFunction;
    

    you write

    window.onload = function() { myInitFunction() };
    

    or, instead of writing

    window.addEventListener("load", myInitFunction);
    

    you write

    window.addEventListener("load", function() { myInitFunction() }); 
    

    Another way to solve it is to use the old

    <body onload="myInitFunction()">
    
    0 讨论(0)
  • 2021-02-01 01:42

    I had this happen when I added 3rd party jQuery code we needed for a partner. I could have easily converted my antiquated window.onload to a jQuery document ready. That said, I wanted to know if there is a modern day, cross browser compatible solution.

    There IS!

    window.addEventListener ? 
    window.addEventListener("load",yourFunction,false) : 
    window.attachEvent && window.attachEvent("onload",yourFunction);
    

    Now that I know ... I can convert my code to use the jQuery route. And, I will ask our partner to refactor their code so they stop affecting sites.

    Source where I found the fix --> http://ckon.wordpress.com/2008/07/25/stop-using-windowonload-in-javascript/

    0 讨论(0)
  • 2021-02-01 01:45

    For me, window.onload was not working when wrote inside script type="text/javascript tag.

    Instead, needed to write the same in script language="Javascript" type="text/javascript tag and it worked fine.

    0 讨论(0)
提交回复
热议问题