onclick="window.open(・・・)" の書き方を間違えていました・・・orz

恥ずかしながら、onclick="window.open(・・・)" の書き方を間違えていました・・・(;´д`)ゞ

とある業務アプリでこんな書き方をしていました。かれこれ2年ほど気がつきませんでした。

<a href="test.cgi" target="_sub"
  onClick="window.open('test.cgi', '_sub', 'width=800,height=200')">小窓を開く</a> 

これだとリクエストが二回発生してしまいます。これ当たり前なんですけど石を投げないでください・・・(;´д`)ゞ

アンカータグをクリックした際に test.cgi へのリクエストが発生し、その直後に onclick イベントで test.cgi へのリクエストが発生します。ただ、どちらも target="_sub" 指定されているので、同一ウィンドウ上に表示されるため、見た目上は一回のリクエストに見えちゃってました。
※ Sleipnir の場合は2つのタブが生成されるので、この問題に気がついていた同僚がいたみたいです・・・教えてよ〜!

この test.cgi にあたる部分が約5分程度かかる DB の集計処理だったので2回もリクエストが同時発生すると遅くて大変です。先日チューニングをしていてサーバログをトレースしているときに気がつきました。html の書き方を正しく変更するだけで、DB の処理が半減され、結果的に約2倍の高速化を実現することができました。

- スポンサーリンク -

とりあえず html をこんな感じに書き換えたところリクエストは1つになりました。当たり前だけど。

<a href="#"
  onClick="window.open(t.cgi', '_sub', 'width=800,height=200')">小窓を開く</a> 

まずは正しい windows.open の使い方ってどんなんだっけ?と素人のような検索ワードでぐぐりました。
JavaScript: window.open() 小窓 なるページがヒットしました。僕は今まで上記の書き方をしてきたのですが、どうもコレも正しくないようです。

結論からすると、以下のような html の記述がベストです。その理由は参照先に記述されているとおり。

次のようにhref属性で開くURLを指定しておき、window.open()の第一引数には this.hrefを渡し、そして、window.open()の後にreturn false;でhref属性へのイベントを抑制するとJavaScriptが有効の場合は小窓、無効または実装されていない場合は普通のハイパーリンクとなります。
※ アクセシビリティの観点から、この方法が最善だろうと思います。
<a href="test.cgi"
  onclick="window.open(this.href, '_sub', 'width=800,height=200'); return false;">小窓を開く</a>

それ以外にもいろいろと書き方があり、それぞれの不都合についてもよくまとまっています。ちなみに僕が覚えていた 、
<a href="#" oclick="window.open(・・・)"> の場合の不都合は、window.open で小窓を呼び出した元ページが先頭に移動してしまうことです。もしもスクロールが必要な場所に、この window.open が仕込んである場合に不都合が発生することでしょう。

また、<a href="#" oclick="window.open(・・・)"> の場合は、javascript を無効にしている場合に小窓を開くことができない問題もあります。これもまた1つの不都合でもあります。

いやぁ勉強になりました。日々これまた勉強です。続きは JavaScript: window.open() 小窓 でどうぞ〜。

- スポンサーリンク -

関連する記事&スポンサーリンク