target=”_blank”の使用はHTMLの属性により、文法エラーになることがあります。またリンク動作はユーザに委ねるべきだということも考慮しなければなりません。
ただ、どうしても使用しなければならない場合もあると思います。それを解決するのがJavascriptです。文法エラーは無視すれば問題ないのですが、ユーザのことを考えるのであれば、これをサイトに導入すべきです。

DOMによる実装

まずはa要素を取得しよう

“getElementsByTagName”で簡単にa要素を取得できます。
変数”Anchor”にa要素を指定します。

var Anchor = document.getElementsByTagName('a');

a要素の判別

a要素をforループを使い調べます。そして要素ノードから属性ノードを取得するメソッド「getAttribute属性」を使い、”http://”で始まっているかを判別します。その際「正規表現」を使います。”/^http:\/\//”の部分が正規表現です。

for (var i=0, len=Anchor.length; i<len; i++){
var a = Anchor[i];
if(a.getAttribute('href').match(/^http:\/\//)){
//ここに外部リンクの動作設定を記述する
}
}

外部リンクだった場合の動作設定

“window.open”を使い外部リンクだった場合、別ウィンドウを開く処理をします。
記述先はif分の間です。

a.onclick = function() {
window.open(this.getAttribute('href'),'_blank');
return false;
}

動作させる

最後に”window=onload = function()”で読み込ませ、今までの記述を合わせればOKです。

window.onload = function() {
var Anchor = document.getElementsByTagName('a');
for (var i=0, len=Anchor.length; i<len; i++){
var a = Anchor[i];
if(a.getAttribute('href').match(/^http:\/\//)){
a.onclick = function() {
window.open(this.getAttribute('href'),'_blank');
return false;
}
}
}
};

クラスを指定する

外部リンクのみにクラス指定をすることも可能です。そうすることで、外部リンクのみにアイコンを付けたりでき、視覚的に認知させることも可能です。

window.onload = function() {
var conf = {
className : 'external'
};
var Anchor = document.getElementsByTagName('a');
for (var i=0, len=Anchor.length; i<len; i++){
var a = Anchor[i];
if(a.getAttribute('href').match(/^http:\/\//)){
a.className = conf.className;
a.onclick = function() {
window.open(this.getAttribute('href'),'_blank');
return false;
}
}
}
};

サンプル

こちらのサンプルでは、クラス名も設定しています。
サンプル

jQueryでの実装

設定は簡単

jQueryを使うと簡単に実装可能です。下の記述だけでOK。

$(function() {
$('a[@href^="http://"]').click(function() {
window.open(this.href, "_blank");
return false;
});
});

クラスを追加

クラス追加はjQuery無しの時とほぼ同じです。違いは”.addClass”が使用できる点です。

$(function() {
var conf = {
className : 'external'
};
$('a[@href^="http://"]').click(function() {
window.open(this.href, "_blank");
return false;
})
.addClass(conf.className);
});

1. Web-Parkのホーム > 
2. Javascript > 
3. 外部リンクのブランク設定をJavascriptで制御