【更新日 : 】
【脱Jquery】javascriptでhttpから始まる外部リンクにtarget blankを追加する。
Category: JavaScript
Tags: JavaScript, Vanilla JS, 脱Jquery
Vanilla JSでhttpから始まる外部リンクにtarget blankを追加する機能を実装したサンプルです。
See the Pen
add target blank Vanilla JS by web_nak (@web_walking_nak)
on CodePen.
JS
//外部リンクにtarget blankを追加する
const httpLinks = Array.prototype.slice.call(document.querySelectorAll('a[href^=http]'),0);
if(httpLinks.length) {
//サイトのホスト名を取得
const hostname = location.hostname;
httpLinks.forEach(function(elm){
//ホスト名が異なるリンク設定の場合のみ_blank系の設定を追加
if(elm.getAttribute('href').indexOf(hostname) === -1) {
elm.setAttribute('target','_blank');
elm.setAttribute('rel','noreferrer noopener');
}
});
}
classも追加する場合
//外部リンクにtarget blankを追加する
const httpLinks = Array.prototype.slice.call(document.querySelectorAll('a[href^=http]'),0);
if(httpLinks.length) {
//サイトのホスト名を取得
const hostname = location.hostname;
httpLinks.forEach(function(elm){
//ホスト名が異なるリンク設定の場合のみ_blank系の設定を追加
if(elm.getAttribute('href').indexOf(hostname) === -1) {
elm.setAttribute('target','_blank');
elm.setAttribute('rel','noreferrer noopener');
//class追加
elm.classList.add('is-blank');
}
});
}