サイト内のリンクで別ドメインのものは全て別タブで開かせる

5627 Views
2018年08月30日 JavaScript

ブログを書いていると別サイトにリンクしたい時ってないですか？
別サイトだから、自分のサイトからアクセス後に離脱して欲しくないので、別タブで開かせてページを閉じたら戻ってきてほしいものですよね？

ただ、毎回「target=”_blank”」の設定をするのはめんどくさい！
僕もそう思い、簡単なjsを作ってみました。
一応、jQuery必須です。

SNSでシェア♪

対応したいページに以下のjsを追加

//別ドメインの物は別タブで開く
$('a').on('click', function() {
	var _this   = $(this);
	var _href   = _this.attr('href');
	var _target = _this.attr('target')
	if (
		(_href.indexOf('http://') != -1 || _href.indexOf('https://') != -1) &&	//httpまたはhttpsがhrefに記述されていて
		!(typeof _target !== 'undefined' && _target !== false) &&				//targetの属性がなく
		!(_href.indexOf(location.host) != -1)										//ドメインが違う場合
	) {
		window.open(_href);
		return false;
	}
});

//別ドメインの物は別タブで開く

$('a').on('click', function() {

var _this = $(this);

var _href = _this.attr('href');

var _target = _this.attr('target')

if (

(_href.indexOf('http://') != -1 || _href.indexOf('https://') != -1) && //httpまたはhttpsがhrefに記述されていて

!(typeof _target !== 'undefined' && _target !== false) && //targetの属性がなく

!(_href.indexOf(location.host) != -1) //ドメインが違う場合

) {

window.open(_href);

return false;

}

});

以上です。

内容としては
・hrefの指定に「http」または「https」の記述がある
・targetの属性がない
・ドメインが閲覧中のページと違う
ことで判定を行なっています。

そのため、すでに運用中のブログやサイトにも導入が可能です！

これで少し時間の短縮ができる様になったかと。

SNSでシェア♪

サイト内のリンクで別ドメインのものは全て別タブで開かせる

対応したいページに以下のjsを追加

関連記事