複数のjsライブラリを利用する際にonloadを書き換える方法

複数のJavaScriptライブラリを利用していて、正常に動作しないや、どちらか一方しか動作しないなどの状況に陥ることがあります。

原因は様々なのですが、一番多いのがJavaScriptライブラリのonload記法に依存する問題です。

onload記法とはJavaScriptを実行するタイミングをonloadイベント（ブラウザがすべてを読み込んでから実行）に設定する際の書き方です。

DreamWeaverを利用している方は、以下のようなソースをよく見るかもしれません。

<body onload="MM_preloadImages('hogehoge')">

これはonloadイベントにMM_preloadImagesという関数を設定しているという意味です。

他にもソースコード中の

window.onload = function(){
	ほにゃらら
}

window.onload = ほにゃらら;

などでonloadイベントを設定しているライブラリもあります。

ただ、これらの記述方法ですと、最後にonloadに設定された関数しか実行されません。

複数のjsライブラリを利用している際などは、onloadに記述された命令が上書きされるので、最後に設定されたライブラリしか実行されないという状況に陥ってしまいます。

onload記法でかかれている複数のjsライブラリを利用しようとした場合、onload記法の書き換えが必要になります。

書き換え方法としては以下のような関数を作成してonloadの際の記述を書き換える方法が簡単です。

function addEvent(elm,listener,fn){
	try{
		elm.addEventListener(listener,fn,false);
	}catch(e){
		elm.attachEvent("on"+listener,fn);
	}
}

これは、addEventListenerという機能を利用して、イベントに対しての命令を上書きではなく追加していく為の関数になります。

IEではaddEventListenerが利用できない為、attachEventという関数で代用します。

上記の関数はIEやそれ以外のブラウザでaddEventListenerを利用する為の関数になります。

<body onload="MM_preloadImages('hogehoge')">

はbodyに書かれているonloadは取ってしまい

<body>

別のjsファイルなどに以下の記述を追加します。

addEvent(window,"load",function(){MM_preloadImages('hogehoge')});

以下のような記述の場合は

window.onload = function(){
	ほにゃらら
}

addEvent(window,"load",function(){ほにゃらら});

に書き換えます。

window.onload = ほにゃらら;

の場合は

addEvent(window,"load",ほにゃらら);

に書き換えます。

これにより複数のjsライブラリ上でバッティングしているonloadイベントをすべて実行できるようになります。

複数のjsライブリが動かない原因はこれだけではありませんが、複数のjsライブラリを使用して正常に動作しない場合、これらを疑ってみてください。

to-Rについて: JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。
書いてる人: 西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア
株式会社トゥーアールについて: 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

最近のエントリー