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>