jQuery で外部サイトへのリンクをコントロール

外部のサイトへのリンクについて、例えばそのことを示すアイコンを付けたり、あるいは別ウィンドウで開いたり、といった扱いをすることはよくある。そんな場合、jQuery があれば以下のような JavaScript でそのコントロールが簡単に。

まず最初に jQuery のセレクタ機能を拡張 しておく。ここでは要素が href 属性を持ち、かつその属性値 (リンク先) のホスト名 (ドメイン名) が今いるページのホスト名と異なる場合に :external セレクタで捕まえられるように拡張。

$.extend($.expr[':'],{
  external: function(a,i,m) {
    if(!a.href) {
      return false;
    }
    return a.hostname && a.hostname !== window.location.hostname;
  }
});

この拡張セレクタを利用して、該当する a 要素に class 属性を付与してみる。

$(function(){
  $('a:external').addClass('external');
});

つまりマークアップは一切いじる必要がないってとこがミソ。あとは CSS で背景画像を表示させるなりどうぞお好きに! ちなみに別ウィンドウで開く仕様にするならこう:

$(function(){
  $('a:external').addClass('external').click(function(){
    window.open(this.href);
    return false;
  });
});