target="_blank" を使わないで新しいウィンドウでリンクを開く方法

<a href="foo.html" target="_blank">foo</a>


  を使えば新しいウィンドウでリンクが開きますが,これは XHTML 1.1 や XHTML Basic では採用されていません.
  ではどうするかというと,スクリプトを使うわけですが,

<a href="javascript:void(0)" onclick="window.open('foo.html');">foo</a>


  こうすると,一見解決したようですが,JavaScript が off の場合はリンク先に飛べません.
  しかも,ステータスバーにリンク先が出ないので不安になります.これを

<a href="foo.html" onclick="window.open('foo.html'); return false;">foo</a>


  とすれば,ステータスバーにリンク先が表示されるし,JavaScript が off でもリンク先に飛ぶことができます.

  ここまでは,AllAbout の受け売りなんですが,いちいちリンク先全部に onclick をつけるのは面倒です.
  しかも,onclick だけではなく onkeypress もつける必要があります.

  これを解決するのが以下のスクリプト.prototype.js 必須.

var PopupWindow = Class.create();
PopupWindow.prototype = {
    initialize: function(className, parentElement) {
        var elements = document.getElementsByClassName(className, parentElement);
        for (var i = 0, len = elements.length; i < len; i++) {
            Event.observe(elements[i], 'click', this.addPopupEvent.bindAsEventListener(this));
            Event.observe(elements[i], 'keypress', this.addPopupEvent.bindAsEventListener(this));
        }
    },
    addPopupEvent: function(event) {
        var element = Event.element(event);
        var link = element.getAttribute('href');
        window.open(link);
        Event.stop(event);
    }
};


  まず,getElementsByClassName() で指定した class を持つ要素を列挙します.それぞれの要素に対して
  click イベントと keypress イベントをバインドしています.

  イベントが発生すると,発生した要素の href 属性を取得して window.open() に渡してあげます.
  本来のイベントは止める必要があるので,Event.stop() しています.

使い方

Event.observe(window, 'load', function () {
    new PopupWindow('popup');
});

<a class="popup" href="foo.html">foo</a>


  この場合は class に popup を指定した a タグが全て別ウィンドウで開きます.class 名は自由に設定できますし,
  親エレメントを指定したければ,prototype.js の document.getElementsByClassName() に引数を渡しているだけなので

Event.observe(window, 'load', function () {
    new PopupWindow('popup', 'p');
});


  のように指定することも可能です.

  以上で,JavaScript が off の場合も同じウィンドウですがリンク先は開けますし,on の場合は別ウィンドウで開くことができます.
  また,いちいち onclick や onkeypress を html 内に記述する必要もありませんので,お手軽に利用することができます.
  そして,ステータスバーにリンク先が表示されるので利用者に不安を与えません.

- ref.: スクリプト OFF でもちゃんと閲覧できるように サブウインドウを開く弊害と対策
  http://allabout.co.jp/computer/hpcreate/closeup/CU20040118A/

注意

  本記事は,別ウィンドウで開くことを推奨しているわけではありません.別ウィンドウで開くことの是非とはまた別のお話です.
  XHTML 1.1 に準拠しながらも,別ウィンドウで開かざるを得ない状況と考えてください.

- ユニバーサルHTML/XHTML
  4839904545
  amazon.co.jp 詳細ページへ
  神崎 正英 (著)
  毎日コミュニケーションズ
  ISBN: 4839904545
  2000/11
  2,310 円

- 詳解 HTML & XHTML & CSS 辞典
  4798010030
  amazon.co.jp 詳細ページへ
  大藤 幹 (著)
  秀和システム
  ISBN: 4798010030
  2005/01
  1,890 円