Strict定義な「HTML 4.0X」「XHTML 1.0」での target=”_blank” の代替手段

「HTML 4.01 Strict」や「XHTML 1.0 Strict」文書型ではtarget属性が定義されておらず事実上廃止となった模様。実際、W3Cが提供する「Markup Validation Service」でもInvalidとなるのが確認出来ます。

リンク先を開くウィンドウの指定手段として広く用いられてきたtarget属性ですが、「新規ウィンドウで開くかどうかは利用者の判断に委ねるべき」との判断から外されてしまったようですが、Webコンテンツを提供する側としては実に頭の痛いところです。

Strict定義に準拠したまま外部サイトへのリンクを別ウィンドウで開きたい…という要求に対しJavaScriptで対応する方法が提起されているようですので、ここではjQueryとprototype.jsという2種のフレームワークを用いた実装例を紹介しておくことにします。

prototype.jsを利用した実装例

新規ウィンドウで開きたいリンク(アンカー)タグに「rel=”external”」を指定します。

<a href="http://xxxxxxxx.net/" rel="external">てすと</a>

続けてHTMLのscriptタグ内、あるいは「external.js」(仮)などとした外部ファイルに以下を貼り付けます。

Event.observe(window, 'load', function() {
  $$("a[rel]").each(function(v) {
   if (v.getAttribute("rel").split(" ").indexOf("external") < 0) return true;
   v.setAttribute("target", "_blank"); 
  });
}, false);

外部ファイルを利用した場合は、prototype.jsの後でインポートさせます。

<script src="prototype.js" type="text/javascript"></script>
<script src="external.js" type="text/javascript"></script>

jQueryを利用した実装例

新規ウィンドウで開きたいリンク(アンカー)タグに「rel=”external”」を指定します。

<a href="http://xxxxxxxx.net/" rel="external">てすと</a>

続けてHTMLのscriptタグ内、あるいは「external.js」(仮)などとした外部ファイルに以下を貼り付けます。

$(function() {
  $("a[rel]").each(function () {
    if ($.inArray("external", $(this).attr("rel").split(" ")) < 0) return true;
    $(this).attr({target:"_blank"})
  });
});

外部ファイルを利用した場合は、jQueryの後でインポートさせます。

<script src="jquery.js" type="text/javascript"></script>
<script src="external.js" type="text/javascript"></script>