外部リンクを別ウインドウで開く

外部リンクにtarget=”_blank”を設定して別ウインドウで開かせることがありますが、target=”_blank”を設定せずに、外部リンクの場合は自動で別ウインドウで開くようにしてみます。

サンプルコード

ページ内の各aタグが別ドメインのリンクでないかチェックして、別ドメインの場合は別ウインドウでリンクを開くように設定します。

HTML

<ul>
    <li><a href="../../">相対パスのリンク</a></li>
    <li><a href="/">ルートパスのリンク</a></li>
    <li><a href="">空のリンク</a></li>
    <li><a href="#">#のみのリンク</a></li>
    <li><a href="https://cly7796.net/blog/category/javascript/">絶対パスのリンク</a></li>
    <li><a href="https://www.google.co.jp/">別ドメインへのリンク</a></li>
    <li><a href="http://hoge.cly7796.net/">サブドメインのリンク(存在しません)</a></li>
    <li><a href="http://hogehugacly7796.net/">現在のドメイン名を含んだ別ドメインのリンク(存在しません)</a></li>
</ul>

JavaScript

// 自身のドメインとページ内にある各aタグを取得する
var domain = location.host;
var links = document.getElementsByTagName('a');

// 各aタグが外部リンクかどうかチェック
for (var i = 0; i < links.length; i++) {
    if(links[i].href.indexOf(domain) == -1) {
        externalLink(i);
    }
}

// 外部リンクのイベントを追加する関数
function externalLink(i) {
    links[i].addEventListener('click', function(e) {
        window.open(links[i].href);
        e.preventDefault();
    }, false);
}

外部リンクを別ウインドウで開くデモページ
現ページのドメインの文字列をリンク先が含んでいるかをチェックしているだけなので、サブドメインや文字列を含んだドメイン名の場合は外部リンクとみなされないです。