<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



http://www.amazon.co.jp/o/ASIN/4839904545/todaysnonsenc-22/ref=nosim/

神崎 正英 (著)

毎日コミュニケーションズ

ISBN: 4839904545

2000/11

2,310 円



- 詳解 HTML & XHTML & CSS 辞典



http://www.amazon.co.jp/o/ASIN/4798010030/todaysnonsenc-22/ref=nosim/

大藤 幹 (著)

秀和システム

ISBN: 4798010030

2005/01

1,890 円

