alertキャンセル時に画面遷移をしたい

前提・実現したいこと

JavaScriptを使用してアラート？ポップアップ？でログイン機能を作成しているのですが、キャンセルボタンを押した際にGoogleのページにスムーズに画面遷移できずに手こずってしまったので質問させていただきます。

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

JavaScript
1 window.addEventListener("DOMContentLoaded", function () {
2      while (true) {
3        myPassWord = prompt("ユーザー名、パスワードを入力してください", "");
4        if (myPassWord) {
5          if (myPassWord == "pass") {
6            break;
7          } else {
8            alert("ユーザー名またはパスワードが違います。");
9          }
10        }else{
11          location = "https://google.co.jp"
12        }
13      }
14    });

上記のようなコードを書いてみたのですが、この場合一度キャンセルボタンを押しても「location = "https://google.co.jp"」のところは通っているのですが、画面遷移はしてくれず、もう一度ポップアップが表示され、2回目のキャンセルを押すと画面遷移してくれます。

JavaScript
1location = "https://google.co.jp"
2//returnを追加
3return;

もしかすると画面遷移の前にループしてしまってポップアップが先に表示されちゃっているのかな、と思いreturnで処理を止めてみました。
この場合は、一度キャンセルボタンを押すと画面遷移してくれました。しかし、遷移前に画面が読み込まれてしまい、一瞬だけページが見えてしまいます。

出来ればキャンセルボタンを押した際ページの内容が読み込まれる前に画面遷移をしたいのですがいい方法は無いでしょうか。よろしくお願いし致します。

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

ブラウザ：chrome

Lhankor_Mhy

2021/04/15 02:25

DOMContentLoaded を外すのはダメなのですか？

ponpon123

2021/04/15 02:29

ページを開いたときに、ページ内容を見せずにパスワードをユーザに打ち込ませたくDOMContentLoadedを使用していました。

Lhankor_Mhy

2021/04/15 02:39

DOMContentLoaded はページがロードされるのを待つために使うものなので、ページ内容を見せたくないなら逆効果ではないかと思うのですが……？

ponpon123

2021/04/15 02:42

画面のロードを待たずに実行できる～のような記事を見かけて使っていました・・・。

Lhankor_Mhy

2021/04/15 03:28

> DOMContentLoaded イベントは、最初の HTML 文書の読み込みと解析が完了したとき、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します。 https://developer.mozilla.org/ja/docs/Web/API/Window/DOMContentLoaded_event ということなので、HTML自体の読み込みを待ちます。

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

回答1件

ベストアンサー

あらかじめ画面を非表示にしておき、パスワードが合っていた場合だけ表示するのはいかがでしょうか。

js
1document.body.hidden = true;
2window.addEventListener("DOMContentLoaded", function () {
3    while (true) {
4        ...
5    }
6    document.body.hidden = false;
7});

または location 更新時だけ明示的に非表示にするとか。

js
1window.addEventListener("DOMContentLoaded", function () {
2    ...
3          document.body.hidden = true;
4          location = "https://google.co.jp";
5          return;
6});

投稿2021/04/15 02:35

編集2021/04/15 03:43

int32_t

総合スコア21695

ponpon123

2021/04/15 02:55

「Cannot set property 'hidden' of undefined」というエラーが表示されてしまうのですが、「document.body.hidden = true;」というのは追加するだけで使用知ることが出来るのでしょうか。bodyに何かプロパティを付けるなどしなければいけないですか？

int32_t

2021/04/15 03:41

ああ、<body>より前に<script>を置いているとそうなりますね。 <script>を<body>より後ろに移動するか、「document.body.hidden = true;」の代わりに <body> に hidden 属性を付けるか、location に代入するときだけ「document.body.hidden = true;」するか、などですかね。

ponpon123

2021/04/15 04:07

キャンセル時に非表示にする方法で解決しました。ありがとうございました。

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