外部リンクに自動的に新しいウィンドウリンクを付ける

外部へリンクする際良く使用する target=”_blank” はxhtmlでは禁止されているので、どうせなら外部へのリンクは 「新しいウィンドウで表示」のアイコンを別途付けてしまおう！

ということで、jQueryを使って新しいウィンドウで表示するアイコンを付ける物を書いてみました。

$(document).ready(function(){

	var checkArea = 'div.post-inner a:not([href^="http://hazisarashi.com"]),';
	var anchorObject = '<img src="/js/images/external.png" width="12" height="11" alt="リンクを新しいウインドウで開く" title="リンクを新しいウインドウで開く" />';
	var className = 'newWin'

	$(checkArea).each(function(){
		var target = this;
		var img = $(target).find("img").length;

		var url = $(target).attr('href');
		if ( url != '' && img == 0 ){
			$(target).after( $('<a href="javascript:void(0);">'+anchorObject+'</a>').click(function(){ window.open(url, "_blank", "status=yes,scrollbars=yes,directories=yes,menubar=yes,resizable=yes,toolbar=yes"); return false; }) );
		}

	});

})

これだけです。
頭の変数を修正することで、どこのサイトでも使える用になります。

checkAreaは、適応したいリンクの jQuery Selectors
anchorObjectは、表示させるアイコンのHTML
classNameは、リンクのclass名

必要に応じて、class名を元に外部CSSなどで margin などを記述してください。

ツイート