はじめに

TES で Web エンジニアをしている Hayato Yamashita です。

最近 TES では、外部情報発信の取り組みとして TES Blog を開設しました。
既にいくつか記事をあげていますので、良かったら他の記事も読んでみてください。

記事一覧 - TES Blog

さて、その開設にあたって私の方でいくつか設定をしていたのですが、社員より以下の要望をもらいました。

href の飛び先を別タブにすることは可能？

こちらの方法を調べましたので、記事として共有します。

外部参照リンクを target="_blank" にする

調べたところ、HTML（JavaScript）を使えばできるみたいです。

主なやり方については、以下の記事を参考にさせていただきました。
ありがとうございます。

yoshiko.hatenablog.jp

こちらの記事は Markdown で書かれていますが、このやり方なら編集モードが「見たまま」でも「はてな記法」でも有効ですね。

しかし、このコードのままだと jQuery を使っています。

別に jQuery がダメってことではありませんし、個人的に嫌いなわけでもないのですが、これをするためだけに jQuery を使わなければならないのは、ちょっと大げさです。

なので、上記の記事を参考にして、jQuery を使わないコードにしました。

その結果がこちらのコードです

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function () {
    var nodeList = document.querySelectorAll("a[href^='http']:not([href*='" + location.hostname + "'])")
    Array.prototype.forEach.call(nodeList, function (v) {
      v.setAttribute('target', '_blank')
    })
  })
</script>