Google Chromeブラウザで新しいタブを開いてそのタブを閉じた時、もう一度そのタブを開こうとすると反応しない問題とその対処法

システム開発

問題を短く伝えるタイトルが思い付きませんでした(笑)。とにかくやってみればわかります。Chromeブラウザをインストール済みの人はぜひ体験してみて下さい。とても不思議な動き。





その１の「次へ」ボタンを押した時、１回目は何もしなくても別タブが開きます。テキストボックスに何かを入力して２回目を押しても別タブが開きます。しかし、テキストボックスをいじらないでボタンを押した２回目、反応がありません。
この現象については同様の悩みを抱えているお話をネットで見つけることができました。



しかし、残念ながら解決策は見つけることができなかった。なので、自分でいろいろやってみることにしました。


さて、まずは前提条件として、どういう場合にこの現象が起こるのか確認してみました。
Chromeで新しく開いたブラウザの右上「×」をクリックした場合にはこの現象が起こることは確認した。では、同様にタブを閉じる機能が割り振られている、「ctrl+w」と「ctrl+F4」でタブを閉じたらどうなるのでしょうか？？


お試し下さい。


意図通り動作します！


そして、同じような機能であってもChromeで問題なく動作しているところがありました。そこのコードと問題のコードを見比べてみました。
すると、問題が無い所では、明示的にwindowを新たに作っていることがわかりました。
例その２がうまくいくパターンです。newというタブを開いてそこをtargetに指定すると意図通り。
例その２−２では明示的にwindowを作っていません。そうするとtarget="_blank"を指定した時と同じ動きをします。つまり、明示的に開いたタブであるかどうかが問題みたいなんですね。


この状況から、この問題の原因を推測してみたのですが、それは問題解決とは直接の関係がないので後で書きます。




さて、とにかくこの問題を解決しなければいけません。私は一体どうしたかというと……


まず、例その２の方法を使う事を考えました。しかし、これでは仕様を満たさなかった。同じリンクをクリックした時、target="_blank"を指定した時と同様何枚もタブが開いて欲しかったのです。
そこで考えたのが例その３。


擬似的ではあるのですが……。日時を使って重複しない名称を作り出してタブを開くという方法です。これでこの問題は解決です。




さて、この問題の原因はどこにあるのか？ソースコードを追ったわけではないのであくまで推測であることをご承知おき下さいね！もし私がこの問題のデバッグをするのならここに目をつけると言う程度の推測です。


Chromeだって、内部的に絶対タブとかウインドウをコントロールしているはずです。その情報のクリアがうまくいってないんじゃないかなぁと思うんですよね。それもタブ右上「×」を押した時だけうまくいってないんじゃないかと。全く同じ内容を含むフォームを送信しないという仕様は理解できる。しかし、それはこの問題の本質ではないように推測しています。
Chromeが既に存在していると思いこんでいるタブが実際にはユーザーに見えていない、それが原因なのではないかなと思うのですよ。
_blankで開いたタブは、内部的にユニークになるIDが振られているはず。そしてフォームからデータを送信する時に、内容が変更されておらず、かつ送信先のタブが同じIDの場合は送信を省略するという仕様になっているんじゃないですかね？(この仕様は動作速度をかせぐためみたいな記述をどこかで見つけたけれど見失ってしまいました……)。ところが、同じIDの窓は既に閉じられている。だから窓が開かないと言う現象がユーザーに見える。


この説明で筋は通ると思います。


最後に余談ですが、Chromeのヘルプフォーラムで「戻る」の挙動がおかしいという話がありました。別記事にしようと思ったのですが簡単なのでここで触れます。Chromeではwindos.back();が「他のブラウザとは同じようには」動作しません。history.back();を使うしかない。history.back();になにか副作用があったような記憶もあるのですが今は思い出せない。
標準と比較してどうかという議論やそもそもback使うなとか言う話はあるのかもしれませんが、実際作っている人にとってはつまづくところかなぁと思いますので書き留めておきます。