人気ブログランキング |
(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秒)遅くすることにしました。

こんな感じです。


<html>
<head>
<script type="text/javascript" language="javascript">
<!--
function Href(){
if ( location.hash.length > 0){
//アンカータグを取得し、そこに飛ぶ
location.href = location.hash;
}
}
// -->
</script>
</head>
<body onLoad="setTimeout('Href()', 1000)">
<!-- DBから取得したコンテンツだが省略 -->
<a name="testname">ページの最後の方にあるアンカータグ</a>
</body>
</html>



参考:
ホームページ読み込み時の処理(onLoad) - イベント処理 - JavaScript入門
[JavaScript] URLのアンカーを取得する。 - うなの日記
JavaScript setTimeout:
setIntervalとsetTimeoutを調べた結果余分なことになった - 三等兵
by jehoshaphat | 2011-08-25 12:18 | Webがらみ


<< (Linux)Logwatch... (.Net)改行無しの全銀フォ... >>