一行かくだけで！すべてのリンクをtarget=”_blank”にする方法

サイト内部のリンクについては、別ウィンドウで開く…ってあんまりないんですが、
サイトによってはすべてのリンクがすべて[target=”_blank”]だったらいいのに～！って思うことありませんか？

サイト内のすべてのリンクに手書きで[target=”_blank”]って書いていくのは大変ですよね？
もちろんJSなどで対応することはできるのですが、めんどくさい笑
そこで今回は『一行かくだけで！すべてのリンクをtarget=”_blank”にする方法』をご紹介します。

やり方はいたって簡単！下記のようにhead内に一行記述するだけです！

<head>
  <base target="_blank">
</head>

この[base]というタグは基本的にhead内に記述することで以下のような機能を果たします。
1.基準URLを指定できる
2.基準ターゲットを指定できる

他にも以下のような指定ができます。

同タブに表示

分割ウィンドウの親フレームに表示

分割ウィンドウを全て解除して表示

ただ一点気を付けないといけないことが、target=’_blank’にはセキュリティ脆弱性が存在するということ。

_blank先のサイトで重いスクリプトが駆動すると元サイトのリソースも食ってパフォーマンスが落ちる、親ウィンドウのオブジェクトにアクセスされてしまう
などがあります。

これらに対応するためには、全ての_blankのタグにrel=”noopener”を追加すればOKなのですが
安全なサイトに対しては、処理を重くしたくないので追加したくないですよね。

ということで以下に@ahya_emon様がコピペするだけで使える、別サイトに対するリンクに対してだけrel=”noopener”を追加するスクリプト
を紹介してくれています！

みなさんもぜひ使って作業を効率化してみてください！

Creator Note