Androidブラウザでのページ内リンクの挙動 - 車輪を再発明 / koba04の日記

ページ内リンクが2回目以降反応しない件

現象

Android2.2( or 2.3)のブラウザだとページ内リンクがうまく動かないということがあって、調べてみるとどうやら一回押したページ内リンクをもう一回押しても反応しないということが。

おそらく、現在のURLが「/hoge/foo#header」だったとして、「/hoge/foo#footer」は反応するけど「/hoge/foo#header」は今いる場所がどこであろうがURL(ハッシュフラグメント)も同じだし反応しないという挙動になっているようです。

それについてのisssue

http://code.google.com/p/android/issues/detail?id=15437

対応方法

これだと困ることがあってどうしようなかと思った時、まず思いついたのがwindow.scrollToでその要素の位置に移動するものでした。
ただ、これは後述しますがiframeで動作しなかったため却下。

そして結局思いついたのはリンクを押すたびに毎回ハッシュフラグメントを空にするというものすごいBKでした。

(function(w) {
  var d = w.document;
  w.addEventListener('DOMContentLoaded', function() {
    var anchors = d.getElementsByTagName('a');
    for (var i=0, length=anchors.length; i<length; ++i) {
      // 別ページのリンク時にも発火するけどまぁ...
      if ( anchors[i].href.indexOf("#") !== -1 ) {
        anchors[i].addEventListener('click', function(e) {
          w.location.hash = "";
        });
      }
    }
  });
})(window);

気持ち悪いですが、これで毎回ハッシュフラグメントが空になるのでページ内リンクが二回目以降も聞くようになります。

Android4.0でiframe内のハッシュフラグメント付きの遷移でページ内リンクが効かない件

現象

あるページに遷移するときに例えばヘッダーに合わせてページを表示したい時「< a href="/hoge/foo#header"」みたいに書くと思うのですが、Android4.0のブラウザだとiframe内では/hoge/fooには遷移してくれますが#headerには遷移してくれません。。
ここでもiframe内ではwindow.scrollToが効かないのでどうしようかなという感じです。。。

対応方法

かなり苦しいのですが、ページ遷移後にハッシュフラグメントが付いていたらaタグ作ってページ内リンクを設定してあげてdispatchEventで発火させるという方法を使うと何とか動作するようです。

(function(w) {
  var d = w.document;
  w.addEventListener('load', function() {
    var hash = w.location.hash || '';
    // 条件は適宜
    var match = hash.match(/^#([0-9a-zA-Z_\-]+)$/);
    if ( match ) {
      var anchorName = match[1];
      // getElementByIdで正しいIDであることを確認
      if ( d.getElementById(anchorName) ) {
        var initAnchor = d.createElement("a");
        initAnchor.href = "#" + anchorName;
        // このタイミングがいつが適切なのかがわからない...。500は実験した結果
        window.setTimeout(function() {
          var event = d.createEvent('MouseEvents');
          event.initEvent('click');
          initAnchor.dispatchEvent(event);
        }, 500);
      }
    }
  });
})(window);