Question

这个问题似乎很常见，但我找不到答案。

我有这个简单的html，只有画布标签

<!doctype html>

  <head>
    <meta charset = "utf-8">
    <script src="js/script.js"></script>
    <title>Title</title>
  </head>

  <body>
    <canvas id = "canvas"></canvas>  
  </body>

</html>

并在script.js中我试图捕获window.onload事件：

window.onload = init;

function init(){
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");

  context.fillRect(50, 20, 150, 150);
}

但没有任何反应。我假设即使在执行第一行js之前加载了html。

所以我发现onload事件的替代方法是将脚本定义放在正文的末尾，所以当脚本被执行时，窗口应该被加载alreade。所以我确实喜欢这个：

<!doctype html>

  <head>
    <meta charset = "utf-8">   
                                  <!-- gone -->
    <title>Title</title>
  </head>

  <body>
    <canvas id = "canvas"></canvas> 
    <script src="js/script.js"></script>  <!-- inserted -->
  </body>

</html>

和

<!-- window.onload = init; -->
init()                              <!-- inserted -->

function init(){
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");

  context.fillRect(50, 20, 150, 150);
}

在某种程度上它可以工作（绘制矩形）~~，但是给我一个错误未捕获的ReferenceError：未定义上下文。~~

所以我的问题是我做错了什么？我也想知道是否有更好的方法来做到这一点。

P.S。我倾向于不使用jquery ......

EDITED：上下文中的错误与上面的代码无关，虽然我仍然不喜欢将链接放到js文件中的想法...

Answer 1

在这里，尝试以下代码。关键点是：

（1）当onload事件触发时，您可以分配多个要运行的函数。（2）您可以随意附上它们。当附加事件触发时，它们仍会被调用。但是 - 我认为不能保证函数的执行顺序与它们所附加的顺序相同。使用addEventListener将多个函数附加到单个事件时请记住这一点。

无论如何，输出是：

created with function called from **test.js**
created with function called from test.html
created with function called from **test.js**

<强>的test.html

<!doctype html>
<html>
<head>
<script src='test.js'></script>
<script>
window.addEventListener('load', mInlineJsLoadFunc, false);
function mInlineJsLoadFunc()
{
    var div = document.createElement('div');
    div.appendChild( document.createTextNode('created with function called from test.html') );
    document.body.appendChild(div);
}
</script>
<style>
</style>
</head>
<body>
</body>
<script src='test.js'></script>
<html>

<强> test.js

window.addEventListener('load', mExternalJsLoadFunc, false);
function mExternalJsLoadFunc()
{
    var div = document.createElement('div');
    div.appendChild( document.createTextNode('created with function called from **test.js**') );
    document.body.appendChild(div);
}

Answer 2

我没有看到它不应该工作的原因，例如这是simple jsfiddle onload提醒

虽然你不需要分两步完成，但你可以写

window.onload = function() {
    alert(1)
}

如果这不适用于你的情况然后调试或登录控制台window.onload的值是什么，可能是其他一些库覆盖了它，这就是为什么最好使用像jQuery这样的库< / p>

Answer 3

将window.onload行移动到javascript文件的末尾或初始函数之后，它将起作用：

function yourFunction(){
    // ...
}
// ...
// at the end of the file...
window.onload = yourFunction;
window.onresize = yourFunction;

但如果你也不替换onload，这是最好的做法。而是将您的函数附加到onload事件：

function yourFunction(){
    //...
}
// ...
// at the end of the file...
window.addEventListener ? 
    window.addEventListener("load",yourFunction,false) 
    : 
    window.attachEvent && window.attachEvent("onload",yourFunction);

这对我有用，对不起我的英语。

window.onload事件不会触发或“如何正确初始化js项目？”

3 个答案: