jqueryでaタグにtarget指定

ユーザービリティ的に「別ウィンドウは使用しないほうがいい」と言われるが、社内的にはそうもいかない事情がいろいろとあり、内部リンクは同ウィンドウでも外部リンクは別ウィンドウで表示しなければならず、ということも。
いちいち a タグに target 指定を入れたり、既に作成済みのページなどリンクを確認するのも面倒なので、jQueryで自動的にtarget指定を付けてしまうという方法。

jQueryで属性を追加する

外部サイトへのリンクのみターゲット”blank”設定

$('a[href^=http]').not('[href *=' + location.hostname + ' ]').attr('target' , '_blank');
<コードの解説>
aタグのhrefがhttpから始まり、location.hostnameが含まれないリンクに対して、target=”_blank” を設定
※location.hostnameは自分のサイトのURL

target=”_blank”の指定がないaタグにのみターゲット”blank”設定

$('a[target != "_blank"]').click(function(){
$(this).attr('target' , '_blank');
});

aタグ全てにターゲット”_blank”を設定

$('a').attr('target' , '_blank');

他にもいろいろjQueryや正規表現で判別方法を指定すれば、追加したいaタグにのみtarget指定を追加できる。

コーディングに関する記事

コメント