MozillaZine.jp フォーラム
https://forums.mozillazine.jp/

iframeで設置したカレンダーを操作時にブラウザの更新をすると埋め込み部分が真っ白になってしまいます
https://forums.mozillazine.jp/viewtopic.php?f=2&t=16895		 ページ 1 ／ 1
作成者:  r-hosono [ 2017年11月24日(金) 18:34 ]
記事の件名:  iframeで設置したカレンダーを操作時にブラウザの更新をすると埋め込み部分が真っ白になってしまいます
Firefox Quantumにアップグレードしてから、ホームページにiframeで埋め込みをしたカレンダーを操作中に
更新（リロード）をするとiframeで埋め込みをした部分が真っ白になってしまい何も表示されない状態になります。

以下にサンプルを用意しましたので、ご参照ください。
http://dotr.jp/iframe-test.html

再現手順は以下の通りです。

(1).上記URLにFirefox Quantumでアクセスします
(2).カレンダーの「＜」「＞」か「週」ボタンをクリックします
(3).ブラウザの更新ボタン、またはF5キーでブラウザを更新します

するとiframeで読み込んでいたカレンダー部分が真っ白になり何も表示されなくなります。
「要素検証」にてコードを確認しますと、<iframe＞のタグは確認できるものの、読み込んでいるHTMLのコードが表示されていない状態です。

なお、Firefoxをアップグレードする前にはこの事象を再現する事はありませんでした。
他のブラウザでも発生してはおりません。

何かご存知なことや解決方法をご存知でしたらご教示いただけますと幸いです。
作成者:  opanchi_1963 [ 2017年11月24日(金) 20:57 ]
記事の件名:  Re: iframeで設置したカレンダーを操作時にブラウザの更新をすると埋め込み部分が真っ白になってしまいます
r-hosono さんが書きました:
(1).上記URLにFirefox Quantumでアクセスします
(2).カレンダーの「＜」「＞」か「週」ボタンをクリックします
(3).ブラウザの更新ボタン、またはF5キーでブラウザを更新します

するとiframeで読み込んでいたカレンダー部分が真っ白になり何も表示されなくなります。
「要素検証」にてコードを確認しますと、<iframe＞のタグは確認できるものの、読み込んでいるHTMLのコードが表示されていない状態です。


HTMLには詳しくはないのですが、
<iframe src="https://select-type.com/rsv/?id=X3dNtzmo63k&amp;w_flg=1" width="650" height="1500" frameborder="0"></iframe>
そのiframeの部のUrlを別タブで開いて、質問者さんのおっしゃてる(2)(3)をやってみると、確認画面が出ます。
添付ファイル:
iframe_part.png
iframe_part.png [ 18.38 KiB | 表示数: 9483 回 ]

「再送信」を押さないとリロードしないみたいです。iframe内ではこの確認画面が表示されないからリロードしてもiframe内は読み込まれず空白になるのでは？
以前のFirefox56.0ではこの確認画面は出ないということなのでしょうか？

ちょっとだけいじってみてわかったことを書いてみました。他に詳しい方からアドバイスが付くといいですが。^_^;
作成者:  opanchi_1963 [ 2017年11月24日(金) 21:14 ]
記事の件名:  Re: iframeで設置したカレンダーを操作時にブラウザの更新をすると埋め込み部分が真っ白になってしまいます
r-hosono さんが書きました:
他のブラウザでも発生してはおりません。

と書かれてますが、Win8.1のIE11でも同じく確認画面は出ますね。
添付ファイル:
iframe_part_ie.png
iframe_part_ie.png [ 10.56 KiB | 表示数: 9480 回 ]

ただIEの場合、iframe内でも出ます。

追加
Google Chrome62では確認画面は出ずに問題なく再読み込み出来ますね。
作成者:  EarlgreyTea [ 2017年11月26日(日) 00:12 ]
記事の件名:  Re: iframeで設置したカレンダーを操作時にブラウザの更新をすると埋め込み部分が真っ白になってしまいます
r-hosono さんが書きました:
Firefox Quantumにアップグレードしてから、ホームページにiframeで埋め込みをしたカレンダーを操作中に
更新（リロード）をするとiframeで埋め込みをした部分が真っ白になってしまい何も表示されない状態になります。

以下にサンプルを用意しましたので、ご参照ください。
http://dotr.jp/iframe-test.html
たしかにこちらでも同じ現象を確認いたしました。
サンプルを見ましたが、「iframeで埋め込んだカレンダー」というのは、SELECTTYPEというサイト（運営：株式会社セレクトタイプ）が提供する予約管理システムのフォームを利用されているということですね。

まず、iframe の src に指定されている https://select-type.com/rsv/?id=X3dNtzmo63k&w_flg=1 をロケーションバーに打ち込んで動作を確認してみました。
ページ上の「＜」「＞」「週」ボタンなどをクリックすると、SELECTTYPEのサーバーのPHPへ要求をPOSTし、処理結果のページを生成して応答するという動きのようです。
ボタンをクリックするとロケーションバーの URL が、https://select-type.com/rsv/index.php#rsv に変わりますし、開発ツールのネットワークモニターでも確認できます。

ちなみに、ロケーションバーの表示が https://select-type.com/rsv/index.php#rsv になった状態でF5を押すと、フォームデータを再送信することを警告する確認ダイアログが表示されます。
ここまでの動作はたいていのブラウザで一緒かと思います。
ちなみに余談ですが、キャンセルを選んだ場合、Firefox/Chrome はページはそのままですが、IE/Edge は先にページを破棄していてエラーページにしてしまうようです。

さて、iframe-test.html の動作の話に戻りますが、他のバージョンで確認したところ、
  • 57～ … iframe 内が空ドキュメントになる。
  • 54～56 … 初期状態の現在のカレンダーが表示される。
  • ～53 … iframe 内が空ドキュメントになる。
という結果となりました。

Firefox 56 と 57のF5リロード時を開発ツールのネットワークモニターで見ますと、56では https://select-type.com/rsv/?id=X3dNtzmo63k&w_flg=1 へのGETリクエストが出ているのに対し、空ドキュメントになってる場合は https://select-type.com/rsv/index.php#rsv への GETリクエストが出ていました。
つまり、iframe のsrcのURLをリクエストしてるか、iframe内ドキュメントの現在URLをリクエストしてるかという動作の違いがありました。
そして、index.php はPOSTを受け付けるものであって、GETリクエストを投げても処理できずに空ドキュメントを返してきてるのではないかと推測できます。

これを踏まえて、ピンと来たので試しにスーパーリロード（Ctrl+F5 または Shift＋リロードボタン）してみたところ、少し待たされましたが現在のカレンダーを表示できました。とりあえず、親ページをリフレッシュ（ロケーションバーでEnter）するか、スーパーリロードで回避できることはわかりましたが、リロード時のiframe 内のフォームページに関する動作はバグとして報告していいんじゃないかと思います。
ただ、フォーム側の方もイレギュラーへの対策をしてもいい気はします。まあ、そういう要望する場合は有料になるでしょうけど。
作成者:  EarlgreyTea [ 2017年11月28日(火) 00:54 ]
記事の件名:  Re: iframeで設置したカレンダーを操作時にブラウザの更新をすると埋め込み部分が真っ白になってしまいます
他のブラウザでどうなるかも試してみました。

Chrome 62.0.3202.94：
Firefox の 54～56と同様に、iframe の中は常に src にセットされたURL（つまり現在のカレンダー）でリロードします。
フォームを単独で表示してボタンで遷移させた後にリロードした場合は、フォームデータ再送信の確認ダイアログが出て、
どちらの選択肢を選んでも、遷移後のカレンダーが表示されます。

Edge 40.15063.674.0：
IE 11.726.15063.0：
iframe の中のフォームであっても、リロードに対してフォームデータ再送信の確認ダイアログが出ます。
どちらの選択肢を選んでも、遷移後のカレンダーがちゃんと表示できます。
より安全な仕様になっているようです。

一応、bugzilla.mozilla.org を調べて見たのですが、関連ぽいものはいくつかあったもののどれもかなり古く、アクティブなものはありませんでした。
iframe 内のリダイレクトや動的に遷移するページのリロード問題、あまり関心は向けられていないようです。

LoadURI()のAPIがセッション履歴からURIを拾ってくるとかそういうことなんだと思いますが、
古いAPIに手を入れる過程で動作が変化して、56→57で結果が変わったのでしょう、たぶん。

最後に現在バージョンの Firefox での動作についてまとめると
  • フォーム単独の場合は、POST送信後のリロードは確認ダイアログが出て、再送信を選んでもちゃんとPOSTで投げてくれる。
  • iframe内のフォームの場合は、POST送信後のリロードは確認ダイアログは出ず、直前のPOSTと同じ Cookie を投げるのですが、なぜか GETなのでサーバーが白紙を返してくる。
ということになります。
作成者:  r-hosono2 [ 2017年12月01日(金) 11:01 ]
記事の件名:  Re: iframeで設置したカレンダーを操作時にブラウザの更新をすると埋め込み部分が真っ白になってしまいます
opanchi_1963様、EarlgreyTea様
ご回答、詳細な調査をして頂きまして誠にありがとうございます。
他ブラウザやバージョン毎の状況が把握できて大変助かっております。
バグの報告もしてみようかと思います。
以下からできるのでしょうか。試してみます。
https://bugzilla.mozilla.org/
作成者:  EarlgreyTea [ 2017年12月01日(金) 21:41 ]
記事の件名:  Re: iframeで設置したカレンダーを操作時にブラウザの更新をすると埋め込み部分が真っ白になってしまいます
r-hosono2 さんが書きました:
バグの報告もしてみようかと思います。
以下からできるのでしょうか。試してみます。
https://bugzilla.mozilla.org/
バグ報告にチャンレンジしていただけるとのこと、ありがとうございます。
テストページもドットアール様のサーバー内ですので、お任せしたほうがよいと思っておりました。

バグ報告するにはアカウント作る必要ありますが、GitHubアカウントを持っていればそれで入れます。
新規にバグを起こすには New から始めます。
まず、Product（今回のはFirefoxですね）を選び、次に Summary を入力して類似バグが無いか検索を求められます。
無いとなったらいよいよバグの起票となり、入力フォームに記入していく形になります。

バグの書き方のガイドラインがありますので参考にしてください。
https://developer.mozilla.org/en-US/doc ... guidelines
https://developer.mozilla.org/ja/docs/B ... guidelines
作成者:  諸行無常 [ 2017年12月02日(土) 07:26 ]
記事の件名:  Re: iframeで設置したカレンダーを操作時にブラウザの更新をすると埋め込み部分が真っ白になってしまいます
EarlgreyTea さんが書きました:
バグ報告するにはアカウント作る必要ありますが、GitHubアカウントを持っていればそれで入れます。
新規にバグを起こすには New から始めます。
まず、Product（今回のはFirefoxですね）を選び、次に Summary を入力して類似バグが無いか検索を求められます。
無いとなったらいよいよバグの起票となり、入力フォームに記入していく形になります。

バグの書き方のガイドラインがありますので参考にしてください。
https://developer.mozilla.org/en-US/doc ... guidelines
https://developer.mozilla.org/ja/docs/B ... guidelines

EarlgreyTea さんへ
引用部「Bugzilla の利用の仕方」について
今後、コピペでの「転用」をさせていただきたく、お願い申し上げます。

追伸：Waterfox は、昨日（現地 UK 時間：11/30）、v56 の最新版が公開されました。
＞ Waterfox 56 Release
作成者:  EarlgreyTea [ 2017年12月02日(土) 08:49 ]
記事の件名:  Re: iframeで設置したカレンダーを操作時にブラウザの更新をすると埋め込み部分が真っ白になってしまいます
諸行無常 さんが書きました:
引用部「Bugzilla の利用の仕方」について
今後、コピペでの「転用」をさせていただきたく、お願い申し上げます。
「Bugzilla の利用の仕方」などというタイトルを冠されるような大層な内容じゃありませんので、
参考にされるのは構いませんが、相手と状況に応じた文章をお考えいただいた方がよろしいかと思います。

諸行無常 さんが書きました:
追伸：Waterfox は、昨日（現地 UK 時間：11/30）、v56 の最新版が公開されました。
先の投稿時点でダウンロード完了しております。ぜひ、 viewtopic.php?f=2&t=16885&start=15#p60964 の方に教えてあげてください。

トピックの内容に即したコメントを寄せていただけた方が、お互い有益かと思います。
ページ 1 ／ 1 All times are UTC + 9 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/