web-dev-qa-db-ja.com

<body>部分内のJavaScriptによるbody.onloadのイベントハンドラーを追加します

Google Maps APIの地図をドキュメントに含めたいと思います。ドキュメントは、本体のonload（）イベントによって呼び出される関数でマップを初期化するように指示しています。

通常の呼び出し方法：

<body onload="initialize_map();">

Template :: Toolkitを使用しており、<body>タグが既にラッパーに含まれているため、これはうまくいきません。つまり、JavaScriptコードの実行が開始されると、<body>タグは既に印刷されています。

私はこのようなことを試みましたが、それはonclickではなくonloadに対してのみ機能します。これは、javascriptコードが<body>タグ自体の下にあるためだと思います。

var body = document.getElementsByTagName("body")[0];

body.addEventListener("load", init(), false);

function init() {
        alert("it works!");
};

Googleマップのマップを起動する方法はありがたいです。

javascripthtmljavascript-eventsonload-event
32
Daniel Böhmer

グラフィカルな目を引く機能にjQueryを既に使用していたので、これを使用することになりました。のようなコード

$(document).ready(function() {
    // any code goes here
    init();
});

私たちが望んでいたことをすべて行い、ブラウザの非互換性を気にしました。

8
Daniel Böhmer
body.addEventListener("load", init(), false);

そのinit（）は、この関数を今すぐ実行して、それが返すものをloadイベントに割り当てると言っています。

必要なのは、結果ではなく、関数への参照を割り当てることです。そのため、（）をドロップする必要があります。

body.addEventListener("load", init, false);

また、body.onloadではなくwindow.onloadを使用する必要があります

addEventListenerはほとんどのブラウザでサポートされています 除くIE 8 。

42
epascarello

代わりに実際に以下を使用する必要があります（すべての新しいブラウザーで動作します）。

window.addEventListener('DOMContentLoaded', init, false);
35
Jacob Lauritzen

@epascarelloがW3C標準ブラウザについて述べたように、次を使用する必要があります。

body.addEventListener("load", init, false);

ただし、IE <9でも動作するようにする場合は、次を使用できます。

var prefix = window.addEventListener ? "" : "on";
var eventName = window.addEventListener ? "addEventListener" : "attachEvent";
document.body[eventName](prefix + "load", init, false);

または、1行で必要な場合：

document.body[window.addEventListener ? 'addEventListener' : 'attachEvent'](
    window.addEventListener ? "load" : "onload", init, false);

注：ここでは、ドキュメントを介してbody要素への直接参照を取得し、最初の行の必要性を省きます。

また、jQueryを使用していて、DOM readyイベントではなく、ボディloadsの場合、答えはさらに短くなる可能性があります...

$(init);
18
Mark Rhodes

実行するコードを、ウィンドウオブジェクトのonloadイベントに単純にラップします。

window.onload = function(){ 
   // your code here
}
2
Moses