やりたいこと

window.showModalDialogのように、サブウインドウを表示して戻り値を取得する。

実装

opener.js

function openWindowToCenter(name, url, width, height) {
  const left = (screen.width - width) / 2;
  const top = (screen.height - height) / 2;
  const param = `width=${width}, height=${height}, left=${left}, top=${top}`

  return window.open(url, name, param);
}

function lockBody(window) {
  window.document.body.style.pointerEvents = 'none';
}

function unlockBody(window) {
  window.document.body.style.pointerEvents = 'auto';
}

function showDialogAsync(url, width, height) {
  lockBody(window);

  const timestamp = Data.now().toString();
  const dialogName = `dialog_${timestamp}`;
  const dialog = openWindowToCenter(dialogName, url, width, height);

  return new Promise((resolve, reject) => {
    const intervalId = setInterval(() => {
      if (dialog.closed) {
        clearInterval(intervalId);

        unlockBody(window);

        resolve(window[dialogName]);
      }
    }, 100);
  });
}

(function () {
  document.getElementById('showDialogButton').onclick = async () => {
    const returnValue = await showDialogAsync('dialog.html', 100, 100);

    console.log(returnValue);
  };
}());

dialog.js

function returnValueToOpener(value) {
  window.opener[window.name] = value;

  window.close();
}

(function () {
  document.getElementById('returnValueButton').onclick = () => {
    returnValueToOpener('戻り値');
  };
}());

opener.html

<html>
  <head>
    <title>呼び出し元ウインドウ</title>
  </head>
  <body>
    <button type="button" id="showDialogButton">サブウインドウを開く</button>
    <script scr="opener.js"></script>
  </body>
</html>

dialog.html

<html>
  <head>
    <title>呼び出し先ウインドウ</title>
  </head>
  <body>
    <button type="button" id="returnValueButton">呼び出し元に値を返す</button>
    <script scr="dialog.js"></script>
  </body>
</html>

補足

ウインドウを閉じたときのイベントにはwindow.oncloseがあるが、標準仕様に含まれていないため使用しなかった。