HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

例えば、既存のサイトに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で対応するしかないんでしょうね。

このエントリーをはてなブックマークに追加

Monthly Archives

Search