CFDN

海外のサイトで見つけた記事。自分用にメモ。

Much to the chagrin of Web designers everywhere, the HTML 4.0 Strict and XHTML 1.0 Strict recommendations of the W3C no longer include the target attribute of the <a> tag. The Transitional versions of the specifications still include it, but by definition, these specs are on the way out.

W3Cで定められているHTML 4.01 Strict・XHTML 1.0 Strict・XHTML 1.1の仕様ではaタグのtarget属性を含んでいません。Transitionalではまだ含んでいますが、近い将来に仕様から外されるのは間違いありません。

個人的にはtarget="blank"など強制的に制作者側の都合でtarget先を押しつけ、閲覧者の自由を奪うのはナンセンスだと思うのですが、用途を限定すれば便利である事は確かです。

しかし前述通り、HTML 4.01 Strict・XHTML 1.0 Strict・XHTML 1.1にはtarget属性が定義されていませんので、使用する事が出来ません。それを回避するのが今回の目的です。

回避方法としてDOMを使います。対応していないブラウザでは使用出来ません。IEやMozilla Firefoxなど最新のモダンブラウザであれば条件を満たしていると思います。

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

上記内容をexternal.jsにて保存し、headタグ内で外部参照する。

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

リンク部分のタグを書き換える。

<!-- Before -->
<a href="http://www.google.co.jp/" target="_blank">Google</a>

<!-- After -->
<a href="http://www.google.co.jp/" rel="external">Google</a>

onloadイベントハンドラにてexternalLinks関数を読み込む。

• SitePoint