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

Pocket
LINEで送る

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

外部リンクを別タブで飛ばしたい

ブログ等の更新をしていて、どうにかしたいなぁと思ってた。
同じサイト内へのリンクは同じタブでの遷移でいいんですが、外部リンクは別タブで飛ばしてあげたい。
ただ毎回、aタグに[target=”_balnk”]を書き込むのは面倒。

[target=”_blank”]挿入条件

  • リンクドメインが window.hostname とイコールではない
  • ページ内リンク「href=”#****”」ではない
  • target=”_blank” がついていない

に当てはまる場合は自動で「target=”_blank”」が書き込まれるようにコードぶち込みました!
自己責任でご自由にお使いください。

<script>
// ページ内の全ての[target="_blank"]のついていない <a> タグ
// @params none;
// @response [terget='_blank']を追加したDOMの配列;
var external_link__add_blank = function(){
    var a_tags = document.querySelectorAll('a:not([target="_blank"])'),
    res = [];
    if(!a_tags.length) return; // a_tagsがマッチなし = end
    for(var i = 0; i < a_tags.length; i++ ){
      if( a_tags[i].href.indexOf(window.location.host) !== -1 ) continue;
      if( a_tags[i].href.indexOf('#') === 1 ) continue;
      a_tags[i].setAttribute('target','_blank');
      res.push(a_tags[i])
    }
    return res;
}
// var a__add_blanks = external_link__add_blank(); console.log(a__add_blanks);
document.addEventListener('DOMContentLoaded',external_link__add_blank,false);
</script>

SNSでもご購読できます。