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

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

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

 

「Webサイトからお問い合わせが来ない…」とお悩みの方必見!
当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供

改修概要

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」を指定しています。

 

 

関連タグ:

CPIの最新情報をTwitterでチェックできます!
@cpiadjp
次へ
前へ