a要素に target=”_blank” を使わないで別窓表示する

target_blank_l

xhtml1.0 strict や xhtml1.1 では target属性がありません。
でも、リンクを別窓で表示させたい場合もありますよね?
そんな時は rel属性を使ったこのサンプルを使ってみてください。

jQueryを使ってもできますが、ここではJavaScriptのみでのサンプルになってます。

HTML

<p><a href="js-external-link.html" rel="external">新規ウィンドウで開くリンク</a></p>

JavaScript

function externalLinks(){
    if(!document.getElementsByTagName){
        return;
    }
    var _1=document.getElementsByTagName("a");
    for(var i=0;i<_1.length;i++){
        var _3=_1[i];
        if(_3.getAttribute("href")&&_3.getAttribute("rel")==="external"){
            _3.target="_blank";
        }
    }
}
window.onload=externalLinks;

表示サンプル

サンプルhtml

別窓表示のサンプル

上記はjQueryを使わないサンプルですが、よっぽどの事がない限りjQueryは使っていると思うので、以下のコードでも良いかもしれません。

$("a[rel$='external']").click(function(){
    this.target = "_blank"
})

また、リンク先が http〜で始まる場合には、

$(function(){
   $('a[href^=http]').attr("target", "_blank");
});

というのもアリですね。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする