別ウィンドウのフォームで保存後、ウィンドウを閉じたい

Question

前提・実現したいこと

railsにてデータベースに保存する時
①フォームを子（別）ウィンドウで開き
②保存が終了したら親ウィンドウ（開いた先のページ）をリロード
③子ウィンドウを閉じたい

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

javascriptで①送信ボタン（submit）を押した際に
イベントが発火、
②親ウィンドウのリロード→③子ウィンドウを閉じる
動作する様に記述したつもりだが何もせず子ウィンドウが閉じられる

該当のソースコード

const reload = () => {
  const form = document.getElementById("check-form");
  form.addEventListener("submit", (e) => {
    window.opener.location.reload(true);
    window.close();
  });
};

window.addEventListener("load",reload)

試したこと

• window.close();を消すと画面は閉じず正常に動作する
• setTimeout('window.close();', 5000);

で5秒後に閉じるように記述したが①保存、②リロードは成功するが
③画面は閉じられない

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

Rails 6.0.3.5

Answer 1

適当でいいならこんな感じ

window.addEventListener('DOMContentLoaded', ()=>{
  const form = document.getElementById("check-form");
  form.setAttribute("target","nWin"); 
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const nWin=window.open("","nWin");
    e.target.submit();
    setTimeout(()=>nWin.close(),100);
    setTimeout(()=>location.reload(),200);
  });
});

Comments

[Ryo-EAST]

回答ありがとうございます
おかげさまで解決しました。

リロードしてからwindowを閉じる様に組み替え
理解を深める為コメントで動作を記述してみました。

検索してそれぞれのコードの意味を調べてみましたが
誤りがありましたらご指摘いただけないでしょうか？

# 理解できない点
- リロードだけでなくウィンドウを閉じる際も時間を遅らせている理由
- addEventListenerの後が'DOMContentLoaded'なのは
後でsetAttributeでtargetを追加する為？
- nWinで閉じたいウィンドウを指定しているように見えるが
それはどれを閉じるかわからないから指定しているのか？

```javascript
// htmlの読み込みが完了した時に
window.addEventListener('DOMContentLoaded', ()=>{
// check-formを探す
const form = document.getElementById("check-form");
// form要素に新しい属性を追加
form.setAttribute("target","nWin");
// submitが押された時に
form.addEventListener("submit", (e) => {
// 送信動作を止める
e.preventDefault();
// 対象のtargetのある子ウィンドウをnWinに代入する
const nWin=window.open("","nWin");
// 送信する
e.target.submit();
// 親ウィンドウのリロード
setTimeout(()=>location.reload(),100);
// 子ウィンドウ(nWin)を閉じる
setTimeout(()=>nWin.close(),300);
});
});
```