MLC2

target=”_blank”をjsを使って外部リンクのみに付ける方法

web

はじめに

外部サイトのリンクを張る度に target=”_blank” を書くのはちょっと面倒だなと感じたので、JavaScriptを使って外部サイトのリンクのみ target=”_blank” を付与したいと思います。

コードはコピペOKなので必要であれば使ってもらって大丈夫です。

実現したこと

  • サイト内リンクは現在閲覧しているタブのまま開く
  • 外部サイトのリンクは target=”_blank” により別タブで開く
  • 最初から target=”_blank” がついているものは変えない
  • 外部サイトへ飛ぶリンクにはセキュリティ対策として rel=”noopener” を付ける

コードとその説明

上から順にコードの説明をしていきます。

・3行目
var a_tags = document.querySelectorAll('a:not([target="_blank"])'),
では、DOM要素から a タグで target=”_blank” が付いているもの以外(not)を a_tags に配列形式で代入しています。

・5行目
if (!a_tags.length) return;
では、3行目で判定した物が0個(false)だった場合に return で終了します。

・7行目
if ( a_tags[i].href.indexOf("mlc2.net") !== -1 ) continue;
では、取得した a タグの href 属性に自分のサイトのドメイン(私の場合はmlc2.net)が含まれていない場合8行目に進みます。

異なるドメインでも同じタブで開きたい場合はこの行の条件判定に複数のドメインを入れることで、ページ内リンクと同じ扱いにすることができます。
ドメインの数が多い場合は indexOf ではなく test(正規表現) を使った方が良いので下記のサイトを参考にしてみてください。

JavaScriptで文字列の有無を調べるにはindexOfではなくtestを使う

・8行目
if ( a_tags[i].href.indexOf('#') === 1 ) continue;
では、取得した a タグの href 属性に #(id) が指定されていない場合9行目に進みます。

・9,10行目
a_tags[i].setAttribute('target','_blank');
a_tags[i].setAttribute('rel','noopener');

では、取得した a タグに target=”_blank” と rel=”noopener” が付与されます。

外部サイトに target=”_blank” を使って遷移した場合は、遷移先から遷移元にアクセスできてしまうので rel=”noopener” を使って対策をするようにしましょう。
詳しい内容は下記のサイトを参考にしてみてください。

「target=”_blank”」の危険性

まとめ

リンクを張る際に別タブで開くのかを考えずに済むので、ブログなどを書く際にはとても便利です。

ただしデメリットもあり、DOMが全て読み込まれる前にリンクを開いたり、そもそもJavaScriptが無効になっている場合は機能しないのでその点も把握しておいてください。

最後まで読んでくださりありがとうございました。

参考サイト

javascriptでページ内の外部リンクのみに[target=”_blank”]を追加する
「target=”_blank”」の危険性