RM-BLOG

IT系技術職のおっさんがIT技術とかライブとか日常とか雑多に語るブログです。* 本ブログに書かれている内容は個人の意見・感想であり、特定の組織に属するものではありません。/All opinions are my own.*

【IE】fancybox起動後にServlet実行すると待機中表示がされない

IEでfancyboxをservletで呼び出したり、もしくはfancyboxからservletを呼び出したりすると、
昔で言うところの「砂時計」にあたる待機中表示が消える(待機中表示にならなくなる)。
特定のケースでは一時的に待機中表示が出たりもするが、これに関してもサーバ側の処理が終わる前に必ず消える。
fancyboxを使わない限りは、待機中表示は処理中であれば消えたりしないので、fancyboxを絡めた場合にだけどうもこうなってしまう。
ただ、Google ChromeとFire Foxはfancyboxがあってもちゃんと待機中表示してくれる。どうもIEだけのようだ。
うん、「また」なんだ。すまない。(´・ω・`)

まあ結構アレな(稀有な)使い方のようにも思えるから普通は起きないのかなあ~
でも俺起きて困ったんだよなあ~

※fancyboxは以下のVer1.3.4を使用しました
http://fancybox.net/home
※fancyboxを使った基本的な実装メモは以下を参考にしました
http://www.webdesignleaves.com/wp/jquery/1362/

 


 

 



以下のような画面遷移構成を考える。

①画面A
 ├───────────────┐
②fancybox           ③submit
 │               │
④Servlet            ⑤Servlet
 │               │
⑥画面B              │
 ├─────┬────┐    │
⑦JS    ⑧submit ⑨※    │
 │     │    │    │
 ├─────┘    ├────┘
 │          │
⑩画面C(fancybox)   ⑪画面C(親)
※の詳細は以下↓

実験してたらいろんなルート考え付いたのでこんな感じになってしまったが
要するに画面A→画面B→画面Cと遷移する流れをいくつかのルートで実現しているだけである。
どこ通っても最終的にたどり着く画面は画面Cとなるが、
最初に呼び出したfancybox内で遷移させるか(⑩)fancyboxを呼び出した親画面側で遷移させるか(⑪)の違いがある。
というか最初は⑩しか作ってなかったのだが「そういや普通に遷移させたらどうなるんだ?」と思って⑪へのルートを後付けで作った。
以下に各箇所の説明を一応挙げてみる。

画面A 実験の開始地点として用意。fancybox呼び出したり(→②)単に画面Cに直接遷移したり(→③)する。
fancybox 画面Aから呼び出される。fancybox起動時のhrefパラメータを「画面Bへ進むためのservlet」に設定する。
submit 画面Aから呼び出される。行先を画面CにしたServletをaction属性に設定してあるformをsubmitするだけ。古来からのServlet起動の仕組みと同じ。つまりこのルート(→⑤→⑪)はfancybox全く関係ない。
④⑤ Servlet 画面Aや画面Bから呼び出される。基本的には、リクエストパラメータでもらった行先の画面名にforwardするだけの簡単な処理。ただし「処理中」であることを無理やり再現するため、リクエストパラメータとしてもう一つ「スリープ時間」をもらった場合、その時間分スリープさせる。
画面B 画面Aからfancyboxで呼び出される。この後「⑦location.hrefで画面C行きのServlet起動」「⑧画面C行きのServletをformのsubmitで起動」「⑨自分自身を閉じた後、親画面のlocation.hrefを画面C行きのServletにして親画面を遷移させる」の3択で遷移先を選ぶ。
⑦⑧⑨ 画面B→画面C遷移 ⑥の項にほぼ書いてしまったので⑥の項参照
⑩⑪ 画面C 最終的にたどり着くことになる画面。画面Bから⑦⑧経由だとfancybox内で遷移後にここにたどり着く(⑩)。画面Bから⑨経由、もしくは画面Aから③⑤経由だと親画面としてここに遷移してくる(⑪)。

 



全部載せてると多くなるので一例をあげると…

IEによる①→②→④→⑥→⑦→⑩遷移

 

20160713_fancyboxtest01_A-B-C_IE01.jpg

 

20160713_fancyboxtest02_A-B-C_IE02.jpg

 

20160713_fancyboxtest03_A-B-C_IE03.jpg

 

20160713_fancyboxtest04_A-B-C_IE04.jpg



Google Chromeによる①→②→④→⑥→⑦→⑩遷移

 

20160713_fancyboxtest10_A-B-C_GC01.jpg

 

20160713_fancyboxtest11_A-B-C_GC02.jpg

 

20160713_fancyboxtest12_A-B-C_GC03.jpg

 

20160713_fancyboxtest13_A-B-C_GC04.jpg



IEによる①→③→⑤→⑪遷移

 

20160713_fancyboxtest20_A-C_IE01.jpg

 

20160713_fancyboxtest21_A-C_IE02.jpg



IEによる①→②→④→⑥→⑨→⑪遷移

 

20160713_fancyboxtest30_A-B-A-C_IE01.jpg

 

20160713_fancyboxtest31_A-B-A-C_IE02.jpg

 

20160713_fancyboxtest32_A-B-A-C_IE03.jpg


…こんなかんじ。
全て載せてるとキリがないのでこの辺にしておく(疲れた…こんなことに変な時間を使ってしまった)

IEの場合、fancyboxが一度間に入ってしまうと、もうその時点でなんかいろいろおかしくなる。
fancybox起動後のあらゆるサーバリクエストに関して、その後のサーバへのリクエストとレスポンス監視をブラウザが諦めてるように感じる。
IEのバグかなあ~これ…
IEとそれ以外だとAjaxでの処理の完了判定が違う?とかいう記事は見かけたが関連あるのかな~