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 円