まくまくHTML/CSSノート
外部リンクをクリックしたときに必ず新しいタブで開く
2017-10-12
自分のウェブサイト内から外部サイトの URL をクリックしたときに、必ず新しいタブでページを開くようにする方法です。

HTML の a 要素によるリンクをクリックしたときに、新しいタブでページを開くには、属性 target="_blank" を指定します。

<a target="_blank" href="http://example.com/">外部サイトへのリンク</a>

HTML を直接記述する方法であれば、このような記述をすればよいのですが、最近主流になっている静的サイトジェネレータでは Markdown 記法などが用いられることが多く、各リンクに上記のような属性を付加するのが難しくなっています。 例えば、

[Markdown フォーマットによるリンクの例](http://example.com/)

という Markdown 記述は、下記のような単純なリンクに置き換えられます。

<a href="http://example.com/">Markdown フォーマットによるリンクの例</a>

このような target="_blank" 属性の指定のないリンクをクリックした場合に、強制的に新しいタブでページを開くようにするには、下記のような JavaScript を使用します(ここでは jQuery の例を示します)。

$(function() {
  $('a[href^=http]').attr('target', '_blank');
});
ここでは「外部リンク」の定義を、URL が http で始まっているものと定義しています。 URL が http で始まるリンクはすべて新しいタブで開くようになることに注意してください。

上記の例では、外部リンクの a 要素に target=_blank 属性を追加していますが、下記のように、リンクをクリックしたときの振る舞いを定義してしまう方法もありますね。

$(function() {
  $('a[href^=http]').click(function() {
    window.open(this.href, "_blank");
    return false;
  });
});
2017-10-12