外部リンクを別窓で開くJavaScript, 動的追加されるリンクにも対応させてみた (jQuery使用)

外部リンクは軒並み target="_blank" にして別窓で開きたいことがある。

そんなとき、HTMLが修正出来ないページ（このはてなブログも）では
JavaScriptで対応することになるのだけど、
よくある方法では不十分だったので自前で実装してみた。

よくある方法

よくあるのはこんな感じのコード。
DOM Readyをトリガーに、対象の要素に対して target="_blank" をセットしていく。
属性セレクタで自サイトのホスト名を含まないリンクを対象にしてる。

$(function() {
  $("a[href^=http]:not([href*='" + location.hostname + "'])"
    ).attr("target", "_blank");
});

参考サイト

それでは不十分なこと

Ajax等で、DOM Readyより後に追加されたリンクに対応出来ない。
はてなブログだと、はてなスター, コメントあたりがそんな動きをしてた。

DOM Readyより後に追加されたリンクにも対応してみた

こんなコードを書いたらそれっぽく動いた。

リンククリックをトリガーに、windowまで伝搬されたイベントを拾って対応してる。
a要素を検索しない分、大きなページでは表示も高速化するかもしれない（未確認）。

$(window).click(function(event) {
  var target = $(event.target);
  if (!target.is("a")) {
    target = target.parents("a").first();
  }
  target.filter(
      "[href^=http]:not([href*='" + location.hostname + "'])"
    ).attr("target", "_blank");
});