8

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

我有这个带有唯一画布标签的简单 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 事件的替代方法是将脚本定义放在正文的末尾，因此在执行脚本时应该已经加载了窗口。所以我这样做了：

<!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);
}

并且在某种程度上它有效（绘制矩形），但给了我一个错误Uncaught ReferenceError: context is not defined。

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

PS我倾向于不使用jquery ...

已编辑：上下文错误与上面的代码无关，尽管我仍然不喜欢将 js 文件的链接放在正文末尾的想法...

4

3 回答 3

8

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

(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**

测试.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>

测试.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);
}
于 2013-10-16T00:28:29.597 回答
4

我看不出它不应该工作的原因，例如这里是一个带有警报的简单 jsfiddle onload

虽然你不需要分两步做，你可以写

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

如果这在您的情况下不起作用，那么调试或记录到控制台的值是什么window.onload，可能是其他一些库正在覆盖它，这就是为什么最好使用像 jQuery 这样的库

于 2013-10-16T00:50:58.313 回答
4

将 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);

这对我有用，对我的英语很抱歉。

于 2016-12-30T04:36:35.293 回答