JavaScriptを使用してWebページがナビゲートされないようにする

JavaScriptを使用してWebページがナビゲートされないようにするにはどうすればよいですか？

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

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

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

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

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

他の方法は、ここで紹介するとは異なり、このコードのビットはなりません、彼が残したい場合は、ユーザー尋ねる警告を表示するには、ブラウザを引き起こします。代わりに、ブラウザがメモリからページをアンロードする前に、DOMのイベントの性質を利用して現在のページにリダイレクトし、ナビゲーションをキャンセルします。

ナビゲーションを直接短絡することで機能するため、ページが閉じられるのを防ぐために使用することはできません。ただし、フレームバスティングを無効にするために使用できます。

(function () {
    var location = window.document.location;

    var preventNavigation = function () {
        var originalHashValue = location.hash;

        window.setTimeout(function () {
            location.hash = 'preventNavigation' + ~~ (9999 * Math.random());
            location.hash = originalHashValue;
        }, 0);
    };

    window.addEventListener('beforeunload', preventNavigation, false);
    window.addEventListener('unload', preventNavigation, false);
})();

免責事項：あなたはこれを行うべきではありません。ページにフレーム無効化コードが含まれている場合は、作成者の希望を尊重してください。

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

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

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

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

最新の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

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

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

jQuery 1.11で受け入れられている回答に相当するもの：

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

JSFiddleの例

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

onunloadを使用します。

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

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

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

Chromeでは、カスタムメッセージの後に表示されるテキストは「このページから移動してもよろしいですか？」です。Firefoxでは、カスタムエラーメッセージはまったく表示されません（ダイアログは表示されます）。

より適切なエラーメッセージは次のとおりです。

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

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

ブラウザの戻る/進むボタンをキャッチしていて、ナビゲートしたくない場合は、以下を使用できます。

window.addEventListener('popstate', function() {
    if (window.location.origin !== 'http://example.com') {
        // Do something if not your domain
    } else if (window.location.href === 'http://example.com/sign-in/step-1') {
        window.history.go(2); // Skip the already-signed-in pages if the forward button was clicked
    } else if (window.location.href === 'http://example.com/sign-in/step-2') {
        window.history.go(-2); // Skip the already-signed-in pages if the back button was clicked
    } else {
        // Let it do its thing
    }
});

それ以外の場合は、beforeunloadイベントを使用できますが、メッセージはブラウザー間で機能する場合と機能しない場合があり、組み込みのプロンプトを強制する何かを返す必要があります。