JavaScript によりページが閉じられます

JavaScript は、Web サイト開発やブラウザ側のスクリプト作成によく使用される、広く使用されているプログラミング言語です。 JavaScript は、美しいアニメーションやインタラクティブな効果を Web サイトに追加するだけでなく、ページを閉じたときに特定のアクションを実行するなど、より便利な機能の実装にも役立ちます。

この記事では、JavaScript を使用して Web ページを閉じ、閉じたときに特定のアクションを実行するいくつかの方法を検討します。また、この目的に使用できるさまざまな方法を紹介し、各方法の長所と短所についても説明します。

方法 1: window.close を使用する

このタスクを実行するには、JavaScript で window.close 関数を使用します。この関数は現在のブラウザ ウィンドウを閉じますが、一部のブラウザでは、ウィンドウを閉じる前にまずウィンドウを開く必要があります。

たとえば、以下のコードでは、新しいウィンドウを作成し、後でそのウィンドウで window.close 関数を呼び出して、閉じる前にメッセージを表示します。

let myWindow = window.open("", "myWindow", "width=200,height=100");
myWindow.document.write("
This is my window!
");
myWindow.close();

上の例では、まず window.open 関数を使用して新しいウィンドウを作成し、「myWindow」という名前を付けます。次に、ウィンドウにメッセージを書き込み、その後ウィンドウを閉じます。

この方法の主な利点は、非常にシンプルで理解しやすく、Web ページを閉じる必要がある単純なシナリオに適していることです。ただし、ウィンドウを閉じる前にメッセージは表示されません。これは、ウィンドウを閉じると、メッセージを表示する機会が与えられずにページがすぐに閉じられるためです。

方法 2: window.addEventListener を使用する

Web ページを閉じ、閉じている間にいくつかの操作を実行するもう 1 つの方法は、window.addEventListener 関数を使用することです。この関数を使用すると、ウィンドウを閉じる前にカスタム コードを実行できます。

window.addEventListener 関数を使用するには、次のコードを使用できます。

window.addEventListener("beforeunload", function(event) {
  event.preventDefault();
  console.log("Are you sure you want to leave?");
  return event.returnValue = '';
});

上記のコードでは、ブラウザが以前に実行されたときにウィンドウを閉じるイベント リスナーをウィンドウに追加します。このイベント リスナーは関数をパラメータとして受け取り、その関数内で必要なカスタム コードを実行します。上記の例では、関数はテキスト メッセージを出力し、ウィンドウが閉じるのを防ぎます。

window.addEventListener メソッドを使用する利点は、ファイルを開くためのデータの保存や保存操作の実行など、ウィンドウを閉じる前に任意のカスタム コードを実行できることです。ページの読み込み時に発生しようとしているイベントなど、他のイベント リスナーと組み合わせて使用​​することもできます。

方法 3: [確認] ダイアログ ボックスを使用する

[確認] ダイアログ ボックスは、ユーザーに特定の操作を実行するかどうかを尋ねるために使用される非常に一般的な JavaScript コンポーネントです。 [確認] ダイアログ ボックスを使用すると、Web ページを閉じるときに本当に終了するかどうかをユーザーに尋ねることができます。

次のコードを使用すると、Web ページを閉じるときに確認メッセージを表示できます。

window.onbeforeunload = function() {
  return "Are you sure you want to leave?";
}

この例では、返される確認メッセージを含む onbeforeunload イベント リスナーを追加します。ユーザーが Web ページを閉じようとすると、ブラウザーに [確認] ダイアログ ボックスが表示され、ユーザーは続行するかどうかを決定できます。

上記の方法を使用する利点は、ウィンドウを閉じる前にダイアログ ボックスを作成できるため、ユーザー エクスペリエンスが向上することです。ただし、ユーザーによってはこの確認ダイアログ ボックスを理解できないため、意図的にダイアログ ボックスを閉じてしまい、Web サイトのウィンドウ全体を誤って閉じてしまう可能性があります。

結論

要約すると、JavaScript を使用してページを閉じ、閉じるときにアクションを実行する方法がいくつかあります。実行する操作の種類とユーザー エクスペリエンスに応じて、各方法に長所と短所があります。

ウィンドウを閉じる前に他の情報を表示する必要がない単純なシナリオの場合、window.close メソッドを使用するのは非常に簡単な方法です。閉じる前にカスタム コードを実行する必要がある場合、または他のイベントと組み合わせてカスタム コードを実行する必要がある場合には、window.addEventListener の方が適しています。最後に、確認ダイアログは、ユーザー エクスペリエンスを向上させ、ユーザーが終了するかどうかを決定できるようにしたい場合に非常に実用的なオプションです。

Web ページを閉じるためにどの手法を使用することに決めたとしても、JavaScript はこれを簡単に行うのに役立つ非常に便利なツールです。

以上がJavaScript によりページが閉じられますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。