スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

JavaScriptでの起票時(onload)処理の実行優先順位

update : 2009/03/03

例えば、既存のサイトにJavaScriptの改修を加えると、それまで動作していたonload処理が動かなくなったりします。
まあ、その都度、調べればなんとなく原因は分かるんですけど。

そこで基本的なことではあるがonload処理のしくみを検証してみます。
一般的にはonload処理の設定には以下の3つがあります。

【手法1】インクルードした外部JSにベタで書く

<script type="text/javascript" src="method1.js"></script>

method1.js

alert('手法1!');

【手法2】インクルードした外部JSで登録する

<script type="text/javascript" src="method2.js"></script>

method2.js

window.onload = function(){
	alert("手法2!");
};

【手法3】HTMLのbodyタグに書く

<body onload="alert('手法3!');">

手法1は良し悪しは別として、他の手法と混在した場合でも必ず実行されるという点では確実です。

手法2と手法3では、手法3が上書かれるかたちなので、混在した場合は手法2が実行されなくなってしまいます。
初めに挙げた例の原因は、たいていこれでしょう。

つまり、優先順としては「手法1 > 手法3 > 手法2」という図式になります。

しかし、W3CなどHTMLとJavaScriptの分離という観点から手法3は好ましくないです。
一般的には手法2で構築するほうが良いでしょう。
ただ、既存のサイトが手法3で書かれている、そこは変更できない、どうしようもない!という場合は手法1で対応するしかないんでしょうね。

B!

Reference

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Monthly Archives