JavaScript を使用して Web ページが他の場所に移動するのを防ぐ

StackOverflow https://stackoverflow.com/questions/821011

  •  03-07-2019
  •  | 
  •  

質問

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

役に立ちましたか？

解決

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

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

編集：returnステートメントの confirm（）を削除しました。これにより、期待どおりに確認ウィンドウが表示されましたが、最初の確認の結果とともに2番目の確認も表示されました。

他のヒント

ここに示した他のメソッドとは異なり、このコードはブラウザにユーザーに去りたいかどうかを尋ねる警告を表示しません 。代わりに、ブラウザがメモリからページをアンロードする前に、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に設定します（または、他の場所に移動しないようにします）。これにより、ユーザーにナビゲーションの確認プロンプトを表示するかどうかを簡単に制御できます。

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

ここに画像の説明を入力

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

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

最新のaddEventListener APIを使用した、より現代的でブラウザーと互換性のある方法の同等物。

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

  e.returnValue = confirmationMessage;     // Gecko and Trident
  return confirmationMessage;              // Gecko and WebKit
});

出典： https://developer.mozilla.org/en- US / docs / Web / Events / beforeunload

jQuery 1.11で受け入れられた回答と同等：

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

JSFiddleの例

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

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.";
}

またはスタックオーバーフロースタイル:「投稿の作成または編集を開始しました。」

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

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 イベントを使用できます。メッセージはクロスブラウザで機能する場合と機能しない場合があり、組み込みプロンプトを強制する何かを返す必要があります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top