window.onloadを複数実行するための対応方法

18Jan

[PR]

Posted by in

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

03Jan

window.onloadを複数実行するための対応方法

Posted by No Name Ninja in Javascript Sample

今や、ブログパーツなど、JSスクリプトで提供されているものなどをよく見かけますが、window.onloadを使用していると、ブログパーツに上書きされたり、ブログパーツ同士が上書きしあったりして動作しなくなることがあります。今回はこの回避方法について記述したいと思います。

●windows.onloadはあとから読み込まれたもののみ実行される。
以下のように２つ定義して実行してみます。

onload = function(){
alert('onload1');
}
onload = function(){
alert('onload2');
}

※実行結果

後から読み込まれた関数しか実行されず、｢onload2｣と表示されるだけです。
組み込んだブログパーツのJSが呼び出して本サイトのonloadが実行されなくなったというのはよくあります。

●windows.onloadとbodyタグの属性onloadの場合
以下のように２つ定義してみる。

※実行結果

bodyタグに記述されたonloadしか実行されません。

ちなみにbodyタグ内でスクリプトを記述してwindow.onloadを実行すると、それが実行されます。
結局はどう定義しようが｢後に読み込まれたもの勝ち｣です。

onload2= function(){

alert('onload2');

}

</script>

onload = function(){

alert('onload3');

}

</script>

</body>

※実行結果

・対応方法
addEventListenerを使うことです。こちらの場合、登録された関数を実行してくれます。

function addOnloadEvent(fnc){

if ( typeof window.addEventListener != "undefined" )

window.addEventListener( "load", fnc, false );

else if ( typeof window.attachEvent != "undefined" ) {

window.attachEvent( "onload", fnc );

}

※attachEventはI.E対応です。

これで記述するとwindow.onloadとバッティングしません。window.onloadも1つだけ定義していても問題ないです。

window.onload = function(){
alert('onload1');
}
onload2 = function(){
alert('onload2');
}
addOnloadEvent(onload2);
onload3 = function(){
alert('onload3');
}
addOnloadEvent(onload3);

function addOnloadEvent(fnc){

if ( typeof window.addEventListener != "undefined" )

window.addEventListener( "load", fnc, false );

else if ( typeof window.attachEvent != "undefined" ) {

window.attachEvent( "onload", fnc );

}

※実行結果

結論として、組み込むパーツがwindow.onloadを使うのはNG。リスナー登録で実装するようにしなければなりません。