12

window.onloadとイベントに問題がありdocument.onloadます。私が読んだすべてのことは、DOMがすべてのリソースで完全にロードされるまでこれらがトリガーされないことを示しています.これは私には起こっていないようです:

Chrome 4.1.249.1036 (41514) と IE 8.0.7600.16385 で次の簡単なページを試してみましたが、どちらも「失敗しました!」というメッセージが表示され、myParagraphロードされていないことが示されました (そのため、DOM が不完全に見えます)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <script type="text/javascript">
            window.onload = doThis();
            // document.onload gives the same result

            function doThis() {
                if (document.getElementById("myParagraph")) {
                    alert("It worked!");
                } else {
                    alert("It failed!");
                }
            }
        </script>
    </head>

    <body>
        <p id="myParagraph">Nothing is here.</p>
    </body>
</html>

外部の .js ファイルで、これよりも複雑なスクリプトを使用していますが、これは問題を示しています。window.onloadタイマーを 0.5 秒実行するように設定することで動作させることができますdoThis()が、これは洗練されていない解決策のwindow.onloadように思えます。別の解決策は、DOM がロードされているかどうかをチェックするタイマーを設定することです。そうでない場合は、0.5 秒後に自分自身を呼び出します (DOM がロードされるまでチェックし続けます) が、これは私には複雑すぎるようです。

使用するより適切なイベントはありますか?

4

5 に答える 5

10

window.onload = doThis;代わりに使用してくださいwindow.onload = doThis();

于 2010-06-04T12:13:03.803 に答える
9

ウィンドウがロードされた時点では本体はまだロードされていないため、次の方法でコードを修正する必要があります。

<script type="text/javascript">
    window.onload = function(){
        window.document.body.onload = doThis; // note removed parentheses
    };

    function doThis() {
        if (document.getElementById("myParagraph")) {
            alert("It worked!");
        } else {
            alert("It failed!");
        }
    }
</script>

FF/IE/Chromeでの動作確認済みですが、ハンドリングも考えていdocument.onloadます。

すでに述べたように、js-frameworks を使用する方がはるかに優れています。

于 2010-03-21T00:14:22.680 に答える
1

onload 関数を配置する場所 (head タグまたは body タグ、またはさらに下) によって異なります。内部イベント バインディングは、ブラウザーごとにわずかに異なるように見えます。

window.onload と document.onloadも参照してください

于 2011-09-10T12:37:38.677 に答える
1

代わりに、jQueryなどの JavaScript ライブラリとその$(document).ready()関数を使用してみましたか。

  $(document).ready(function() {
      // put all your jQuery goodness in here.
  });
于 2010-03-21T00:00:17.040 に答える