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を使用しない傾向があります...

EDITED：コンテキストのエラーは上記のコードとは何の関係もありませんが、本体の最後にjsファイルへのリンクを配置するという考えはまだ好きではありません...

4

3 に答える 3

8

ここで、次のコードを試してください。重要なポイントは次のとおりです。

(1) onload イベントが発生したときに実行される関数を複数割り当てることができます。(2) 好きなところに取り付けられます。添付されたイベントが発生すると、それらはすべて呼び出されます。ただし、関数がアタッチされたのと同じ順序で実行されるという保証はないと思います。addEventListener を使用して複数の関数を 1 つのイベントにアタッチする場合は、この点に注意してください。

とにかく、出力は次のとおりです。

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);
}
于 2013-10-16T00:28:29.597 に答える
4

それが機能しない理由がわかりません。たとえば、ここにアラート付きの単純なjsfiddleがあります onload

2つのステップでそれを行う必要はありませんが、単に書くことができます

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 に答える