外部サイトリンクに別Window(_blank)を自動付与するJavaScript

サイト内のリンクは同じWindowで開く、外部サイトリンクの場合は別Window(_blank)を自動で付与するJavaScirptの紹介です。

ソースコードの大半は下記のサイトより引用で、より汎用的なコードにするために正規表現を変更し再配布しております。
http://blog.elearning.co.jp/archives/2767.php

改修概要

https://でも、http://でも使えるように改修
「-」ハイフンを含むドメインでも使えるように改修

 

使い方

 

jQueryを読み込みます。バージョンは1、2、3系どちらでも動作確認済みです。

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

 

JavaScriptのコードを記述します。

<script>
$(document).ready( function () {
    var domain = location.href.match(/^http?(s)?(:\/\/[a-zA-Z0-9-.:]+)/i)[0];
    $('a[href^=http]').not('[href*="'+domain+'"]').attr('target','_blank');

    // ドメイン名の取得はlocationプロパティでも取得することができます。
    // 正規表現で取得した例
    console.log(domain);

    // locationプロパティを使用する場合
    console.log(location.hostname);

    // locationプロパティPort番号を含む場合
    console.log(location.host);
})
</script> 

※2016年10月27日15時 西畑様より、ドメイン名はlocationプロパティを使用しても取得が可能との指摘を受けましたので、追記しました。

 

 

解説

3行目:
「location.href.match」メソッドで、domain変数に正規表現でドメイン名だけを抜き出しています。

4行目:
jQueryのDOMセレクタで、aリンクのhref属性にhttpが指定されている箇所でかつ、3行目で抜き出した、自ドメイン以外の場合に、target属性の「_blank」を指定しています。

 

 

関連タグ: 

この記事をシェアする:

Author
この記事を書いた人:阿部 正幸

KDDIウェブコミュニケーションズ
クラウドホスティング事業本部 エバンジェリスト

CPIスタッフブログ編集長。ACE01,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場

Line@登録よろしくお願いします

Web制作に関する情報や、CPIノベルティのプレゼント、サーバーの無償提供などを定期的に発信しています。
ぜひ、登録ください。