Webアプリのモーダルダイアログ内での画面遷移

Webアプリ、というかHTMLとJavaScriptなのですが。技術情報というよりも、私自身のためのメモです。

以下のようなJavaScriptによりモーダルダイアログを表示した場合に、モーダルダイアログ内でサブミット処理を行なうと別ウィンドウが新たに開いてしまいます。*1

<input type="button" onclick="showModalDialog('dialog.html', this, 'resizable: yes;')" value="ダイアログ表示"/>

これを回避するには以下のような方法があるようです。

  • window.openを使用し、ダイアログではなくウィンドウとして表示する。ただし、モーダルのような動きを実現するには、フォーカスロストのたびにフォーカスを再設定するようなJavaScriptを記述する必要がある。
  • フレームを利用する。ダイアログの表示対象としてフレームを指定し、実際にダイアログ内に表示するページはフレームの内容として表示する。

*1:そういう仕様らしいです。