JSでのhtmlファイルを適切に閉じる方法

前提・実現したいこと

今、JSであるボタンをクリックし、別ファイルを開き10秒後にそのファイルを閉じる
というプログラムを書きたいと考えています。

発生している問題・エラーメッセージ

しかしながら、一旦ファイルが開いたらそのまま、開きっぱなし
の状態で閉じることができません。
お分かりの方おられましたら、ご教示ください。

エラーメッセージ

特になし。(コンソールで確認済み)

該当のソースコード

<html>
<head>
(中略)
</head>
<body>

//bodyのbottunタグ
<button type="button" id="real_regist" class="btn btn-danger btn-wide">本登録</button>

<script>
  var WaitWindow;

  //ファイルopen           
  function openWaitWindow(){	   
     WaitWindow = window.open('https://example.com/example.html',
     WaitWindow,
    );
  }
 
  //ファイルclose      
  function closeWindow(){	   
     WaitWindow.close('https://example.com/example.html',
     WaitWindow,
     );
  }

  //待ち時間処理
  function sleep(waitMsec) {
    var startMsec = new Date(); 
    // 指定ミリ秒間だけループさせる（CPUは常にビジー状態）
    while (new Date() - startMsec < waitMsec);
  }

  //イベント
  $("#real_regist").click(function () {

     //ファイルを開く
　   openWaitWindow();

　　　//待機時間10秒
　   sleep(1000);

　　　//ファイルを閉じる
     closeWindow();	
  });
</script>

</body>
<html>

試したこと

この問題に対して試したこと

以下コードで試しましたが、同じ現象でした。

let win
 //ファイルを開く
 const openWindow = () => {
   win = window.open("https://example.com/example.html")
 }
 //ファイルを閉じる
 const closeWindow = () => {
   win.close()
 }

補足情報（FW/ツールのバージョンなど）

サーバー上のexample.htmlファイルは、下記URLを叩けば移ります。
https://example.com/example.html

以上、よろしくお願いいたします。

(エラーメッセージ:async/awaitタイプで実行した場合)

m.ts10806

2020/07/23 23:44

提示されているURLのそれぞれのドメイン所有者でしょうか。でないなら実際の所有者に迷惑をかけることにもなるので例示ドメインを利用してください。あと、コード内にはどこにも「ファイルを開く」「ファイルを閉じる」記述はありません。やりたいことは正しく表現してください。

Nitta

2020/07/24 02:28

ご指摘ありがとうございます。記述修正しました。これで宜しいでしょうか？

m.ts10806

2020/07/24 02:31

（再掲）例示ドメインを利用してください。 https://ja.wikipedia.org/wiki/Example.com なぜ「aaaaaはダメだけどxxxxxxはOK」と思えるんだろう・・・。

Nitta

2020/07/24 06:15

申し訳ないです。再修正しました。以後、類似のことはないようにいたします。お世話になりました。

行動規範の内容に同意します

回答2件

ベストアンサー

JavaScriptの基本実装であるコールバック方式で試す例

javascript
1document.querySelector("#real_regist")
2  .addEventListener("click", evt=>{
3     let
4       btn = evt.target,
5       win = window.open("./sub.html","_blank")
6     ;
7     btn.disabled = true; // opener のボタンを無効化
8
9     win.onunload = () => {
10       btn.disabled = false; // opener のボタンを有効化
11       alert("閉じた");// callbackに置き換え可能な位置
12     }
13
14     setTimeout( ()=> win.close(), 10000 );
15  });

+- public/
      test.html ... opener
      sub.html  ... openee

onunload はタブ切り替えでも発生するかもしれません。

投稿2020/07/25 02:07

AkitoshiManabe

総合スコア5434

Nitta

2020/07/25 23:56

返信ありがとうございました。見事に達成できました。 JSは中々難しいですね。特にコールバックの扱いが。。また、宜しければご教示ください。今回はありがとうございました。感謝です。

行動規範の内容に同意します

windowのopen/closeもウェイトのかけ方も全体的におかしいです

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3var url="https://xxxxxxx.com/○○○○○○.html";
4var WaitWindow;
5function openWaitWindow(){       
6  WaitWindow = window.open(url,"_black");
7}
8
9function closeWindow(){
10  WaitWindow.close();
11}
12$(function(){
13  $("#real_regist").on('click',function(){
14    openWaitWindow();
15    setTimeout(()=>closeWindow(),10000);
16  });
17});
18</script>
19<button type="button" id="real_regist" class="btn btn-danger btn-wide">本登録</button>

どうしてもsleep処理をしたいならasync/awaitをしてください

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2
3<script>
4var url="https://xxxxxxx.com/○○○○○○.html";
5var WaitWindow;
6function openWaitWindow(){       
7  WaitWindow = window.open(url,"_black");
8}
9
10function closeWindow(){
11  WaitWindow.close();
12}
13async function sleep(waitMsec) {
14  return new Promise(resolve=>setTimeout(()=>resolve(true),waitMsec*1000));
15}
16$(function(){
17  $("#real_regist").on('click',async function(){
18    openWaitWindow();
19    await sleep(10);
20    closeWindow();
21  });
22});
23</script>
24<button type="button" id="real_regist" class="btn btn-danger btn-wide">本登録</button>