prototype js で外部リンクがあるとフックするスクリプトを書こうとして苦労しています。

http://q.hatena.ne.jp/1224819924
で質問したのですが、回答なしなので自分でつくりはじめています。それで下記のスクリプトなんですが、head の中では動かず、下のほうにおくと動きます。仕様なのでしょうか? 知らないのでどじを踏んでいる可能性が高いのです。head 内でも動く方法教えてください。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id="5">prototype のテストです。</title>
<script src="prototype-1.6.0.2.js"></script>
<script>
function linkCheck(e) {
alert('yahoo link clicked');
}
t = document.getElementsByTagName('a')[0];
Event.observe($(t),'click',linkCheck);
</script>
</head>
<body>
<div id="test">
<h1>test</h1>
</div>
<a href="http://www.yahoo.co.jp"> yahoo </a>
<br />
ここにスクリプトがあると動く
</body>
</html>

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2008/10/27 17:54:58
  • 終了:2008/11/03 17:55:02

回答(2件)

id:GoldenDawn No.1

GoldenDawn回答回数426ベストアンサー獲得回数812008/10/27 18:15:10

ポイント35pt

HTML と JavaScript は最初から順に読み込みながら評価されます。

今のままだと

t = document.getElementsByTagName('a')[0];
Event.observe($(t),'click',linkCheck);

この部分が評価されたときにはまだ a要素が評価されていないので t は空になります。

onload = function() {
  t = document.getElementsByTagName('a')[0] ;
  Event.observe($(t),'click',linkCheck) ;
}

のようにすると HTML を読み終わってから文を実行することができます。


http://q.hatena.ne.jp

id:Mars No.2

Mars回答回数203ベストアンサー獲得回数202008/10/27 18:59:27

ポイント35pt

書く場所で動いたり動かなかったりするのは、

scriptが即座に実行されるため。

head部に置いてdocument.getElementById~とか実行しても、その対象がまだ読み込まれていないのでエラーになります。

window.onload=function(){
・・・
}

みたいな書き方にすればhead部に書いてもページのロード完了イベントを契機に実行されるので、一応は解決します。

(例では手抜きしましたが、addEventListenerやattachEventを使った方がスマートです。)

ただし、onloadが起こる前にも画面のレンダリングは開始しているので読み込みにもたついていると、Event.observeの前にリンクをクリックされちゃう事もあり得ます。重たいページ/サーバではイマイチな方法です。

私的にはこの手の仕組みはページ最下部に置くのが常套化しています。


※Mozila系だけを動作対象にするなら、DOMContentLoadedというイベントで実行すればonloadより早くて確実なタイミングで実行できます。

jQueryならDOMContentLoadedに加えてIEやsafari向けにも色々やって、同等のタイミングで実行させる事ができるようです。

http://www.mikage.to/jquery/jquery_basic.html

「HTMLとコードの分離」の部分。

id:isogaya

ありがとうございます。下においたほうがいいということですね。

2008/10/27 22:26:56

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません