javascript - JavaScript を使用して Web ページから移動できないようにする

Question

JavaScript を使用して Web ページが離れないようにするにはどうすればよいですか?

Answer 1

を使用onunloadすると、メッセージを表示できますが、ナビゲーションが中断されることはありません (遅すぎるため)。ただし、使用onbeforeunloadするとナビゲーションが中断されます。

window.onbeforeunload = function() {
  return "";
}

注: 新しいブラウザーでは、上書きできない「保存されていない変更は失われます」などのメッセージが表示されるため、空の文字列が返されます。

古いブラウザーでは、プロンプトに表示するメッセージを指定できました。

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

Answer 2

最新の addEventListener API を使用して、より最新のブラウザ互換の方法で同等のもの。

window.addEventListener('beforeunload', (event) => {
  // Cancel the event as stated by the standard.
  event.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = '';
});

ソース: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

Answer 3

私はこのわずかに異なるバージョンになりました：

var dirty = false;
window.onbeforeunload = function() {
    return dirty ? "If you leave this page you will lose your unsaved changes." : null;
}

他の場所では、フォームがダーティになったときにダーティ フラグを true に設定します (または、別の場所に移動しないようにしたい場合)。これにより、ユーザーがナビゲーションの確認プロンプトを受け取るかどうかを簡単に制御できます。

選択した回答のテキストを使用すると、冗長なプロンプトが表示されます。

Answer 4

Aymanの例では、falseを返すことにより、ブラウザのウィンドウ/タブが閉じないようにします。

window.onunload = function () {
  alert('You are trying to leave.');
  return false;
}

Answer 5

jQuery 1.11 で受け入れられた回答に相当するもの:

$(window).on("beforeunload", function () {
    return "Please don't leave me!";
});

JSFiddle の例

altCognito の回答ではunloadイベントが使用されましたが、これは JavaScript がナビゲーションを中止するには遅すぎます。

Answer 6

onunloadを使用します。

jQueryの場合、これは次のように機能すると思います。

$(window).unload(function() { 
  alert("Unloading"); 
  return falseIfYouWantToButBeCareful();
});

Answer 7

その提案されたエラー メッセージは、ブラウザーが既に表示しているエラー メッセージと重複している可能性があります。Chrome では、2 つの同様のエラー メッセージが同じウィンドウに次々と表示されます。

クロムでは、カスタム メッセージの後に表示されるテキストは、「このページを離れてもよろしいですか?」です。Firefox では、カスタム エラー メッセージはまったく表示されません (ただし、ダイアログは表示されます)。

より適切なエラー メッセージは次のようになります。

window.onbeforeunload = function() {
    return "If you leave this page, you will lose any unsaved changes.";
}

または、stackoverflow スタイル: 「投稿の作成または編集を開始しました。」

Answer 8

終了時に状態を通知なしに戻す必要がある場合は、次の行を使用します。

window.onbeforeunload = null;