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

DOMによる実装

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

“getElementsByTagName”で簡単にa要素を取得できます。
変数”Anchor”にa要素を指定します。
[sourcecode language=’Javascript’]
var Anchor = document.getElementsByTagName(‘a’);
[/sourcecode]

a要素の判別

a要素をforループを使い調べます。そして要素ノードから属性ノードを取得するメソッド「getAttribute属性」を使い、”http://”で始まっているかを判別します。その際「正規表現」を使います。”/^http:\/\//”の部分が正規表現です。
[sourcecode language=’Javascript’]
for (var i=0, len=Anchor.length; i外部リンクだった場合の動作設定

“window.open”を使い外部リンクだった場合、別ウィンドウを開く処理をします。
記述先はif分の間です。
[sourcecode language=’Javascript’]
a.onclick = function() {
window.open(this.getAttribute(‘href’),’_blank’);
return false;
}
[/sourcecode]

動作させる

最後に”window=onload = function()”で読み込ませ、今までの記述を合わせればOKです。
[sourcecode language=’Javascript’]
window.onload = function() {
var Anchor = document.getElementsByTagName(‘a’);
for (var i=0, len=Anchor.length; iクラスを指定する

外部リンクのみにクラス指定をすることも可能です。そうすることで、外部リンクのみにアイコンを付けたりでき、視覚的に認知させることも可能です。
[sourcecode language=’Javascript’]
window.onload = function() {
var conf = {
className : ‘external’
};
var Anchor = document.getElementsByTagName(‘a’);
for (var i=0, len=Anchor.length; iサンプル

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

jQueryでの実装

設定は簡単

jQueryを使うと簡単に実装可能です。下の記述だけでOK。
[sourcecode language=’Javascript’]
$(function() {
$(‘a[@href^=”http://”]’).click(function() {
window.open(this.href, “_blank”);
return false;
});
});
[/sourcecode]

クラスを追加

クラス追加はjQuery無しの時とほぼ同じです。違いは”.addClass”が使用できる点です。
[sourcecode language=’Javascript’]
$(function() {
var conf = {
className : ‘external’
};
$(‘a[@href^=”http://”]’).click(function() {
window.open(this.href, “_blank”);
return false;
})
.addClass(conf.className);
});
[/sourcecode]

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