62

我在网站上有以下代码：

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

 function resize(){
  heightWithoutHeader = (window.innerHeight - 85) + "px"; 
  document.getElementById("main-table").style.height = heightWithoutHeader;
  document.getElementById("navigation").style.height = heightWithoutHeader;
 }

工作正常，onresize但onload事件永远不会触发。我已经在 Firefox 和 Chrome 中尝试过，但它们都不起作用。

感谢您的帮助，并为声誉而努力！;D

4

10 回答 10

116

I think what's probably happening here is that your window.onload is being overridden later, check to make sure that it's not via things like <body onload="">

You can check this by alert(window.onload) in your re-size function, to see what's actually attached there.

于 2010-05-11T14:31:00.447 回答
37

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/

于 2013-07-15T18:33:02.803 回答
5

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.

于 2016-12-30T04:32:44.543 回答
4

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()">
于 2020-08-16T13:34:47.407 回答
2

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.

于 2017-07-01T09:55:17.543 回答
1

这对我有用，我认为您的问题出在其他地方：

 function resize(){
  var tester = document.getElementById("tester"),
      html = tester.innerHTML

  tester.innerHTML = html + "resize <br />"
 }  

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

你可以在这里自己测试：http: //jsfiddle.net/Dzpeg/2/

你确定它是唯一一个叫做 onLoad 的事件吗？也许另一个 onLoad 事件会产生冲突

于 2010-05-11T13:17:51.160 回答
1

In my case

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

surprisingly (for me) didn't help (I tried to set a value for dropdown when user uses browser backwards button). And window.onload didn't work for the reason Nick Craver♦ explained here above - it was overridden by <body onload="...">.

So I tried this using jQuery and it worked like a charm:

$(window).on('pageshow', function() {
    alert("I'm happy");
});
于 2021-04-07T20:07:27.497 回答
0

put "_blank" as the target param has solved in my case

let wind    = open(url,"_blank","options here")
wind.onload = .... // works fine now
于 2021-10-25T21:51:14.590 回答
-1

当您调用函数 resize() 旁边的“window.onload”时，这将起作用

于 2010-05-11T13:06:58.593 回答
-4

如果真的按照这个顺序，那肯定是行不通的。在声明函数本身之前，您不能将函数分配给事件处理程序。

于 2010-05-11T12:58:25.667 回答