jQueryMobile の popup で iframe を表示した際に自動的に閉じる方法

かなり特殊な構成になりますが、jQueryMobile の popup パネルを表示し、そこに iframe で別ページを表示するサイトを作成したときに、少し苦労したところがあるので、記録しておきます。

その popup をあるイベントをトリガーに自動的に閉じる動作をさせたかったのですが、jQueryMobile のマニュアルを参照しながら、以下のコーディングをしました。


  $("#popupPanel").popup("close");

しかしこれでは、うまく動作する端末としない端末がありました（このときは Android では動作したのですが、iPhone では動作しませんでした）。この popup("close") ですが、ある条件のときには、どうやら history.back() の動作をしているようなのです。もちろん通常の popup であれば、history.back() はパネルを閉じるのと同じ効果が出ます。しかし今回作成したのは、内部に iframe で別ページを表示した popup パネルであり、その内部でいくつか遷移が行われている状態です。このため、いくら popup("close") を呼び出しても、iframe 内の履歴が戻るだけで、いっこうにパネルが閉じないのです。

いろいろ調べた結果、以下のおまじないを記述することで、閉じる動作をすることができました。

  $("#popupPanel").popup({history: false});
  $("#popupPanel").popup("close");

jQueryMobile を使いこなすのも、なかなか難しいですね。。。