こんにちは、鈴木です。
TECHSCORE Advent Calendar 2014 の 2 日目の記事です。
外部サイトへのリンクの横に「別ウィンドウで開きますよ」的なアイコンが付いているサイトって結構多いですよね。リンクを押すと別ウィンドウで開くアレです。
こんなやつ
これを実現するために全力で頑張っても良いのですが、できることなら簡単な方法があると嬉しいですよね。
jQuery と CSS で実現する方法
jQuery と CSS を組み合わせて、ある程度楽に実現することができます。
以下の JavaScript を見てください。
|
1 2 3 4 5 6 7 8 9 |
$("a[href]").each(function() { if (!this.href.match(new RegExp("^(#|\/|(https?:\/\/" + location.hostname + "))"))) { // 別ウィンドウで開く. $(this).attr("target", "_blank"); // external というクラスを付けておき, CSS でアイコンを付ける. $(this).addClass("external"); } }); |
href 属性を持つ a 要素について繰り返し、href の値が「# で始まる」 or 「/ で始まる」 or 「ドメインが location.hostname に一致する」かどうかを判定しています。一致しない場合は別ウィンドウで開くために target="_blank" を追加し、CSS のクラスとして「external」を付けています。
ここでは「$("a[href]")」として全ての <a> を対象としていますが、必要に応じて条件は変更してください。
次に CSS でクラスが「external」のものにアイコンを付けるようにします。
|
1 2 3 4 |
a.external { padding-left: 13px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAO5QAADuUB1UTNawAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADdSURBVBiVYzxn5fCGTUKSmQEH+P/zB9Ofrz/qDfZvm8DAwMDAwsLLw8oqKsyHS8O/b98Y/v18JQDjM14JDHvLa24q9OvZc4Zfz19gsYKBgeE/w38GRsb/rCJCn1m4NNU/ypWXCF32CmBgl5PFZREjAwMD48/nz/mZcKnABVhgDDZJCQb56nK8ih+1dTGw/Hn3nu3b9RsMTOzsDOyyMng1MLKxMjB9vXGr/HZ+aeb/f//+E+Wm////M/z//5/hVkbu3/8EwO28ov+M//9DDL5TUPqJ4f8/XryG//v/CwDY9m8jCOSUEAAAAABJRU5ErkJggg==) no-repeat scroll left center transparent; } |
左パディング（padding-left）を行い、背景（background）に BASE64 でエンコードした画像を指定する、という具合です（アイコンはリンクの左に付けるか右に付けるかは好みが分かれるでしょう）。
これで「外部サイトへのリンクはアイコンを付けて別ウィンドウで開く」ということが簡単に実現できました。
