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

2014/8/30 HTML, JavaScript

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");
});

というのもアリですね。