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

comments(10) | trackback(6)

<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
  
  
  神崎 正英 (著)
  毎日コミュニケーションズ
  ISBN: 4839904545
  2000/11
  2,310 円

- 詳解 HTML & XHTML & CSS 辞典
  
  
  大藤 幹 (著)
  秀和システム
  ISBN: 4798010030
  2005/01
  1,890 円