ウィンドウのonloadイベントで複数のjavascript関数を呼び出す方法は?
例の場合、
window.onload=MyFunc(); //Single Function
しかし、ウィンドウのonloadイベントで呼び出す関数が複数ある場合はどうなりますか...
ウィンドウのonloadイベントで複数のjavascript関数を呼び出す方法は?
例の場合、
window.onload=MyFunc(); //Single Function
しかし、ウィンドウのonloadイベントで呼び出す関数が複数ある場合はどうなりますか...
それらを包みます。
window.onload = function() { MyFunc(); MyOtherFunc(); }
または、関数をウィンドウのロードイベントにバインドすることもできます。
window.addEventListener("load", MyFunction, false);
window.addEventListener("load", MyOtherFunction, false);
IEレガシーの場合、attachEventメソッドを使用する必要がある場合があります。
window.attachEvent("load", MyFunction);
window.attachEvent("load", MyOtherFunction);
このアプローチの問題は、関数が実行される順序を期待できないことです。
方法を説明するサンプルピースを次に示します。
// create an array that will contain all
// your functions that you would like to
// call on page load
var pageOnLoadEvents = [];
// Add one or more functions in pageOnLoadEvents array
pageOnLoadEvents.push(function() { alert("Hello!"); })
pageOnLoadEvents.push(function() { alert("How are you?"); })
// This will call when your page will load
window.onload = function() {
// Loop through each index of pageOnLoadEvents
for(var index = 0; index < pageOnLoadEvents.length; index++) {
// '()' brackets in the end tell them to make a call
// If you don't include '()' at the end this will
// suspect as a object as in JavaScript functions
// are first-class objects.
// document.write(pageOnLoadEvents[index].toString()); // treat as object
pageOnLoadEvents[index]();
}
}
上記のサンプルは、質問の説明を簡単にするために作成されたものです。しかし、サイモン・ウィリソンのウェブログには良い説明があります、と彼は書いています:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
/* more code to run on page load */
});
addLoadEvent関数は、ページがロードされたら実行する必要がある別の関数を引数として取ります。window.onloadに直接割り当てるのとは異なり、この関数は、以前に追加されたonload関数が最初に実行されるようにイベントを追加します。続きを読む。
ページの読み込み時に1つの関数内で同じ数の関数呼び出しを呼び出すという昔ながらの方法を使ってみませんか?window.addEventListener( "load"、Foo、false);
ここで、Fooは必要なすべての関数を呼び出します。このようにして、必要に応じて順序と戻り値を制御できます。