複数の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ライブラリを使用して正常に動作しない場合、これらを疑ってみてください。

関連エントリー

Re:href="#" onclick の悪習
DOM 読み込み完了時に関数を実行する domready.js
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』
footerをウィンドウ下部に固定する『footerFixed.js』
ブロックレベル要素の高さを揃えるheightLine.js

スポンサードリンク

«【Adobe Spry TIPS】 ツールチップ | メイン | Movable TypeでSEO対策-Feed編-»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1104
コメント

まさにこの問題で困っていました。
おかげさまで解決しました。
本当にありがとうございました。

投稿者:クワイ | 2009年1月23日 13:35

「onloadが上書きされる」という原理がわかり、とても参考になりました。

投稿者:mezzo | 2013年1月26日 10:30
コメントを投稿