外部リンクのブランク設定をJavascriptで制御

Javascript

2009.05.27

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で制御
オススメ本(既読)
読んでみたい本(未読)

COMMENT!!

たとえばWordPressなどのツールを使っている場合
リンクのhrefは
<?php bloginfo(‘url’); ?>/about
などのように絶対パスで掃き出されるようにすることが多いので
そういう場合にも対応できるように

if(a.getAttribute(‘href’).match(/^http:\/\//))

は、http://のマッチングに加えてドメインが違うリンクのみに適用すると広く使えます。

var href = a.href, host = new RegExp(location.hostname);
if(href.match(/^http\:\/\/) && !href.match(host))

確かに同ドメイン内のリンクがブランクになると困りますね。WordPressを使用しているのにその事を忘れてました。
いつもありがとうございます!!

COMMENT PLEASE!!

トラックバック

「外部リンクのブランク設定をJavascriptで制御」のトラックバックURL
http://web-park.org/javascript/external090525.html/trackback
about me

Manabu Kushimoto

Welcome to WEB-PARK.ORG!!
This domain was made since 2008 February.

Gender
Male
Birth year
1982
From
Osaka,Japan
  • はてな?ブックマーク
  • delicious
  • facebook