Validな新規ウィンドウ

a要素のtarget属性は使用しないことが推奨されているが、別ウィンドウの必要性が無くなった訳ではないので、Valid な新規ウィンドウの開き方を考えてみた。既出かもしれませんが。

今まではこう書いてました。

<a href="http://www.hogehoge.jp/index.html" target="_blank">

target属性を使わないとなると、まず JavaScript が思いつきます。

<a href="#" onClick="window.open( 'http://www.hogehoge.jp/index.html' )">

しかし、JavaScript 無効の場合このリンクは機能せず、アクセシブルでないということになります。 href 属性にURLを記述して、それを JavaScript から利用することを考えます。

<a href="http://www.hogehoge.jp/index.html" onClick="window.open( this.href )">

だいぶ、出来てきました。しかし、これでは親ウィンドウもリンク先に移動してしまいます。さあて、困った。ちょっと調べているとこんな情報が。

新規ウインドウのオープン−JavaScript非対応を考慮した

どうやら、a要素にfalseを返してやるとa要素のハイパーリンクは機能しなくなるらしい。 JavaScript 部分をメソッド化します。

function openWin( url ) {
  window.open( url );
  return false;
}

戻り値を false にする所がミソです。普通、ウィンドウを開くメソッドに戻り値なんて思いつかないよ・・・ そして、a要素のonClickイベントハンドラで上記のメソッドを実行します。

<a href="http://www.hogehoge.jp/index.html" onClick="return openWin( this.href )">

ここでもopenWin()メソッド自体を戻り値にしてやります。そうすると、openWin()が実行された後にa要素にfalseが返り、親ウィンドウは遷移しなくなります。JavaScript が無効の場合は通常のハイパーリンクとして機能します。

テストはこちらで

こういう発想ができる人って凄いなあ。尊敬します。