本文へジャンプ

howtohp.com

JQueryで外部リンクを新規ウィンドウで開きアイコンを付ける。

以前にも書いたエントリーなんですが、消しちゃったので、リライトです。

外部リンクを新規ウィンドウで開くっていうのを実現しようとすると、aタグのtarget属性に"_blank"を指定するんですが、DOCTYPE宣言がstrictの場合、target属性が非推奨で使えないので、Javascriptで実現するしかないわけです。

なので、httpもしくは、httpsで始まるものを新規ウィンドウで開くようにし、ついでに、外部リンクの場合、ユーザビリティの向上のために、外部リンクであるとわかりやすいようにアイコンも付けれるように会社の人にJqueryを使って書いてもらいました。

以下がソースです。

$(document).ready(function(){
	var domains = [document.domain,'www.hoge.co.jp','hoge.co.jp'];
	var domain_selector = "",left_str= ":not([@href^=http://",left_str_https=":not([@href^=https://",right_str = "])";

	domain_selector = left_str+domains.join(right_str+left_str)+right_str;
	domain_selector+= left_str_https+domains.join(right_str+left_str_https)+right_str;
	$("a[@href^=http]"+domain_selector+":not(:has(img))").addClass("exlink");	
	$("a[@href^=http]"+domain_selector).click(function(){
		window.open(this.href,"_blank");
		return false;
	});
	});

});

ここで、httpもしくはhttpsからはじまるsrc属性を持っているaタグににexlinkというクラスをつけているので、そのクラスにCSSで外部リンク用のアイコンを指定すれば、外部リンクすべてに、アイコンを付けることができます。
ちなみに、以前書いていた記事では、aタグの中身が画像でもクラスをつけちゃってたんですが、今回はaタグの中身が画像の場合は除外するようにしています。

で、関連サイトなんかは外部リンクでURLで指定していても、新規ウィンドウで開いて欲しくない場合もあるかもしれないので、'www.hoge.com'の部分にドメインを指定します。
一応、wwwあり、なし両方指定してます。
ここで指定したドメインは新規ウィンドウでは開かないようになってます。

CSSでアイコンを付けるのは以下のような感じでいいかと思います。

a.exlink {
	background-image:url(アイコン画像へのパス);
	padding-right:15px;
}

CSSで指定している右側のpaddingはアイコン画像の大きさ分+余白と考えてください。

ページ先頭へ戻る

Trackback URI

http://howtohp.com/mt5/mt-tb.cgi/4

Add Comments

コメント入力フォーム
 (公開されません)