今回はjQueryを使ってtarget要素を使わずに外部リンクを新しいウィンドウで開くようにしてみます。
XHTML1.0strictとXHTML1.1ではtarget要素がなくなりました。XHTML1.0TransitionalとFramesetでは定義はされていますが、「非推奨要素」とされています。そうは言っても、外部リンクを新しいウィンドウで開きたい場合は多々あるかと思います。（クライアントからどうしても別窓でと頼まれたり･･･）そんな時にこのTipsは大いに使えると思います。

今回はJavaScriptのwindow.open()を使います。普通に使うなら下記のように書きます。

window.open(飛び先のURL, '_blank')

外部リンクだけを新しいウィンドウで開きたいので、属性セレクタを指定して下記のように書きます。[@href^=”"]と書いてある部分はXPathの指定方法に基づきます。

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

これで通常のサイトなら上記のコードで外部リンク(http://～からはじまるもの)は新しいウィンドウで開くようになります。ところがMovableTypeだと内部リンクも絶対URLで書いてあるため、このままでは不都合が生じてしまいます。

MovableType用にコードを書き換える

上記のjQueryのコードをMovableType用に書き換えてみます。
jQueryにはフィルターというものがあります。特定のDOM要素を抜き出し、さらにフィルターで要素を絞ることができます。ここではそのフィルターを使い要素を絞ってみます。

$('a[@href^="http"]').not('[@href^="自分のサイトのURL"]')

not以下がフィルターとして追加した部分です。href=httpという属性をもつ<a>要素のうち、not以下で自分のサイトURLを指定してあるものを除外しています。”自分のサイトのURL”の部分にご自身のサイトのURLを入れて下さい。最終的なjQueryのコードは下記のようになります。

$(document).ready( function () {
	$('a[@href^="http"]').not('[@href^="http://www.lllcolor.com"]').click(function(){
	window.open(this.href, '');
	return false;
	});
	$('a[@href^="http"]').not('[@href^="http://www.lllcolor.com"]').addClass("exLink");
});

下から2行目の部分は外部リンクにaddClassで”exLink”というクラスを付与するための指定です。外部リンク用に予めCSSでexLinkクラスを指定するだけでクラスをつけるのはjQueryがやってくれます。いちいち全ての外部リンクに手作業でクラスを付加する必要がないわけです。

今回はwindow.openを使って新しいウィンドウを開くようにしましたが、もちろんjQueryでtarget=_blankを付けてやることもできます。その場合は.attr()という関数を使い、.attr()(”target”,”_blank”)と指定すればOKです。

• jQueryで外部リンク新しいウィンドウで開くようにするデモ

関連エントリー

• 関連する投稿はありません。

• Category
  • MovableType
  • jQuery
• 2 件のコメント

現在、この記事へのトラックバックは受け付けていません。