jQueryを使って、外部サイトへのリンクだけ別ウィンドウで開く方法 | AdDe - 静岡のデザイン制作会社アドテクニカのデザイナーブログ

jQueryを使って、外部サイトへのリンクだけ別ウィンドウで開く方法




以前、静岡の住宅建設会社さんのサイトをYahoo!カテゴリへの登録申請をした際に、外部サイトへのリンクが別ウインドウで
開いていない、という指摘を受けました。

対処方法は、外部サイトへのリンクは別ウインドウで開くようにAタグを書き直せば良いのですが、この静岡の住宅建設会社さんはページが多めなこともあり、今回はjQueryを使って、外部リンクの場合だけ別ウィンドウで開くように設定をしました。
(僕じゃなくてシステムの人がやってくれた。)

以下その方法

1.jQueryのサイトからjquery.jsをダウンロードしてくる。

2.ページのヘッダにjquery.jsを読み込む。

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>



3.ページソース内(ヘッダとか)に下記スクリプトを書く。

<head>
<script type="text/javascript" src="jquery.js"></script>


<script type="text/javascript">

$(document).ready( function () {
//Aタグのhrefの中身がhttpから始まるもので、www.sample.com以外の文字列が入っているものを判別。
$('a[@href^="http"]').not('[@href*="www.sample.com"]').click(function(){

//クリックした場合に、別ウィンドウでそのリンク先を開く。
window.open(this.href, '');
return false;});
});

</script>


</head>



これで、外部サイトへのリンクが、別ウィンドウで開くようになります。

僕は、3で書くスクリプトを外部ファイル化して、全ページに読み込ませました。
いちいちAタグを追って直してくより全然楽ちんですね。javascriptって便利だなぁ。