target="_blank" を使わないで新しいウィンドウでリンクを開く方法
2006-03-14-5: [JavaScript]
<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 円
