【JavaScript】showModalDialogをwindow.openに変更する

10月 20, 2022

1. showModalDialogをwindow.openに変更する

showModalDialogをwindow.openに変更する

今回使用した環境

64 ビットオペレーティングシステム

Windows 10 21H2

Google Chrome 106.0.5249.119

背景

Internet Explorer では使用できた「showModalDialog」も Google Chrome では使用できません。

もう既に Internet Explorer のサポートは、2022年6月15日に終了していますが、まだイントラネットオフライン環境の端末には Internet Explorer が使用されているところもあります。

ただ端末を更改するにあたり、もう Google Chrome や Microsoft Edge などのモダンブラウザに移行せざるを得ない場合がありますね。

その移行にあたり様々な影響があると思いますが、その影響の中のひとつに「showModalDialog」が使えないということがあります。

この記事では「showModalDialog」を使ってメイン画面からサブ画面を呼び出し、サブ画面からメイン画面に対して値を返すという動きを「window.open」で作ってみます。

ソースコード

「main.html」です。ボタンクリック時にサブ画面を呼び出します。

※window.openは「subwindow.js」に書かれています。サブ画面は部品化させるのが目的で別のjsファイルにしています。

<html>
<head>
  <script src="subwindow.js">
  </script>
</head>
<body>
  <input type="button" value="サブ画面呼出"
   onclick="openSub('hinmeiCd', 'hinmei');" /><br />
  品名コード
  <input type="text" id="hinmeiCd" /><br />
  品名
  <input type="text" id="hinmei" />
</body>
</html>

「sub.html」です。ボタンクリック時にメイン画面側に値をセットし、自分自身を閉じます。

<html>
<head>
  <script type="text/javascript">
    function closeSub() {
      var returnValue = {
        hinmeiCd: document.getElementById("hinmeiCd").value,
        hinmei: document.getElementById("hinmei").value
      };
      window.opener.setHinmei(returnValue);
      window.close();
    }
  </script>
</head>
<body>
  <input type="button" value="メイン画面に値返却"
   onclick="closeSub();"><br />
  品名コード
  <input type="text" id="hinmeiCd" value="J001"><br />
  品名
  <input type="text" id="hinmei" value="じゃがいも">
</body>
</html>

「subwindow.js」です。引数の hinmeiCdId, hinmeiId があるのはメイン画面側でId名が統一されていない（できない）パターンがあるかもしれないのでそこを考慮しています。

function openSub(hinmeiCdId, hinmeiId) {
  window.setHinmei = function(returnValue) {
    document.getElementById(hinmeiCdId).value = returnValue.hinmeiCd;
    document.getElementById(hinmeiId).value = returnValue.hinmei;
  }
  window.open("sub.html", "", "width=400,height=200");
}