web-dev-qa-db-ja.com

JavaScriptを使用してWebページが移動しないようにする

JavaScriptを使用してWebページが移動するのを防ぐ方法は？

javascriptonbeforeunload
111
Software Enthusiastic

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

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

編集：期待どおりの確認ウィンドウが発生するため、returnステートメントのconfirm()を削除しましたが、最初の確認の結果とともに2番目の確認も表示しました。

136
Jimmie R. Houts

ここで紹介する他の方法とは異なり、このコードはnotにより、ブラウザにユーザーが去るかどうかを尋ねる警告を表示します。代わりに、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);
})();

免責事項：これは絶対にしないでください。ページにフレームバスティングコードが含まれている場合は、作成者の希望を尊重してください。

23
anarchocurious

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

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

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

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

enter image description here

14
Danger

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

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

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

5
Paul Weber

JQuery 1.11で受け入れられている回答と同等：

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

JSFiddleの例

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

4
BoffinbraiN

onunload を使用します。

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

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

推奨されるエラーメッセージは、ブラウザに既に表示されているエラーメッセージと重複する場合があります。クロムでは、2つの同様のエラーメッセージが同じウィンドウに次々に表示されます。

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

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

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

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

2
Curtis Yallop

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

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

1
bit-less