3流プログラマのメモ書き

元開発職→社内SE→派遣で営業支援→開発戻り浦島太郎状態の三流プログラマのIT技術メモ書き。 このメモが忘れっぽい自分とググってきた技術者の役に立ってくれれば幸いです。

(HTML)IE8でページ内リンクが動かない

IE8でページ内リンクが動かない現象が発生してます。必ず起こるというわけではないんですが、ページの下の方へ行くほどこの現象が頻発してきます。

ページの構成としては a.php から b.php のtestというアンカーリンク(ページ内リンク)を呼び出す処理で、a.phpのリンク先には b.php#test としています。

原因ですが、b.php はDBの結果を表示するものでサーバの負荷が高く1ページのデータ量がかなり多いもの(テキストオンリーなのに1MB超え)となってます。

つまり、リクエストを投げてからページを表示するまで若干時間がかかってるようです。(Firebugで計測すると1.92sもかかってます)

おそらく、アンカーリンク先のページをまだ完全に読み込んでないのにIEがアンカーリンクへ飛ぼうとして、このような現象が起きたんだと思います。

対策としては本来は根本原因である1ページのデータ量を減らすべきなんでしょうが、とりあえずページを完全に読み込んだ段階で、Javascriptを使ってアンカータグへ飛ばすことにしました。

onLoad イベントがページの読み込みが完了したら動くのでここに処理書いてたんですが、それでも読み込みの方が遅延することがあったので、setTimeout を使ってアンカータグへ飛ぶのを意図的に(1秒)遅くすることにしました。

こんな感じです。

onLoad="setTimeout('Href()', 1000)">

name="testname">ページの最後の方にあるアンカータグ

参考:

ホームページ読み込み時の処理(onLoad) - イベント処理 - JavaScript入門

[JavaScript] URLのアンカーを取得する。 - うなの日記

JavaScript setTimeout:

setIntervalとsetTimeoutを調べた結果余分なことになった - 三等兵