javascriptのwindow.openメソッドについて

Question

---

モーダルを表示するためにwindow.openメソッドを使用しています。
現状非同期で処理が実行されるのですが、これを同期で処理を実行することは可能でしょうか。
下記は現在実行中のwindow.openになります。

url = "遷移したいページを指定";
window.open(url, window, "width=300,height=200,top=250,left=500"); 

---

お手数をおかけしますが、
ご教示のほど何卒よろしくお願いいたします。

---

Comments

[maisumakun]

> これを同期で処理を実行することは可能でしょうか。

何と何を同期させたい、という話でしょうか。

[runban]

失礼いたしました、openメソッドでモーダルが開かれてから閉じるまでを同期で実行させたいです。
また、openで開いた先にurlにモーダルを閉じるcloseメソッドを記載しています。

[yambejp]

openメソッドの第二引数にwindowを指定しているのはどういう意図でしょうか？

[runban]

yambejpさん
親画面の情報を渡してあげる必要があるみたいなので、windowを設定しております。
大変申し訳ございませんが、詳しくはわかりません、

Answer 1

昔は showModalDialog() というものがあったのですが、Google Chrome と Firefox からは削除されてしまいました。

「ウィンドウが閉じるまでブロックする」という処理はできませんが、(開いたウィンドウが同一オリジンなら) async/await で逐次的なコードにすることは可能かと思います。

Comments

[runban]

ありがとうございます！
下記の通りコードを修正したのですが、正しく処理が動作しません、
続けての質問で大変申し訳ないのですが、下記コードで違和感のあるところがあれば、ご教示頂けますと幸いですm(__)m

function modal() {
return new Promise((resolve, reject) => {
var url = "";
url = "遷移するURL";
window.open(url, window, "width=300,height=200,top=250,left=500");
}
}
async function openWaitingWin() {
await modal();
//modal()の後に次に実行させたい処理
○○
}

[int32_t]

window.open() で開いたページの中で、ウィンドウを閉じるときに何らかの手段でこの Promise の resolve() を呼ぶ必要があります。

[runban]

ご回答ありがとうございます！
下記コードがopen()を開いた先でモーダルを閉じる処理を書いておりまして、resolve()を実行してみたのですがうまくいきません、、
続けてで大変申し訳ございませんが、下記コードで違和感のあるところがあれば、ご教示頂けませんでしょうかm(__)m
(window.opener.Promise().resolve()で呼び出し元のresolveを開くようにしています)

ScriptManager.RegisterStartupScript(Me, Me.GetType(), "Close", "open('about:blank', '_self').close();window.opener.setValue(1);window.opener.Promise().resolve()", False)

[int32_t]

modal() の中で new している Promise のコールバックに指定された resolve 引数のことなので、window.opener.Promise().resolve では参照できません。

スマートではないですが一番簡単なのは、modal() の Promise の中で 「window.modalResolve = resolve」とでもして、「window.opener.modalResolve()」を呼ぶことでしょうか。setValue() の中で呼んでもいいかもですね。

[runban]

ありがとうございます！！

Answer 2

window.openで同期処理というのは合理的な素案だとはおもえません
またwindow.open自体モーダルではなくモードレス処理なので命題には合わないと思います。

sample

別ページをモーダルで開きたいならdialog+iframeでどうでしょう？

<style>
dialog{
padding:0;
}
dialog iframe{
border:0px solid;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  btn.addEventListener('click',()=>{
    modal.open=1;
  });
});
</script>
<dialog id="modal">
<iframe src="sample.html"></iframe>
</dialog>
<input type="button" value="btn" id="btn">

//sample.html

<style>
body{
margin:0;
padding:0;
}
</style>
test
<input type="button" value="close" onclick="top.modal.open=null">