Mencegah halaman web dari menavigasi jauh menggunakan JavaScript

Menggunakan onunload hanya memungkinkan anda untuk menampilkan pesan, tapi itu tidak akan mengganggu navigasi (karena terlambat). Namun, anda dapat menggunakan onbeforeunload dan itu akan mengganggu navigasi:

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

Edit: Dihapus confirm() kembali pernyataan seperti ini menyebabkan mengkonfirmasi jendela seperti yang diharapkan, tetapi juga menunjukkan kedua mengkonfirmasi dengan hasil konfirmasi terlebih dahulu.

Tidak seperti metode lain yang disajikan di sini, ini sedikit kode yang akan not menyebabkan browser untuk menampilkan peringatan menanyakan pengguna apakah dia ingin meninggalkan; sebaliknya, itu eksploitasi evented sifat DOM untuk redirect kembali ke halaman ini (dan dengan demikian membatalkan navigasi) sebelum browser memiliki kesempatan untuk membongkar itu dari memori.

Sejak itu karya-karya oleh hubungan arus pendek navigasi langsung, itu tidak dapat digunakan untuk mencegah halaman yang tertutup; namun, hal itu dapat digunakan untuk menonaktifkan frame-penghilang.

(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);
})();

Disclaimer: Anda harus tidak pernah melakukan hal ini. Jika sebuah halaman memiliki bingkai-penghilang kode pada itu, silahkan menghormati keinginan penulis.

Saya berakhir dengan versi yang sedikit berbeda:

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

Di tempat lain saya menetapkan bendera kotor untuk benar ketika membentuk mendapat kotor (atau saya jika ingin mencegah menavigasi jauh). Hal ini memungkinkan saya untuk dengan mudah mengontrol apakah atau tidak pengguna mendapatkan Konfirmasi Navigasi cepat.

Dengan teks pada jawaban yang dipilih anda lihat berlebihan petunjuknya:

Di Ayman's contoh dengan kembali palsu anda mencegah jendela browser/tab dari penutupan.

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

Setara dengan yang lebih modern dan browser yang kompatibel, menggunakan modern addEventListener Api.

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

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

Sumber: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

Setara dengan jawaban yang diterima di jQuery 1.11:

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

[JSFiddle contoh](http://jsfiddle.net/485xsaao/)

altCognito's jawaban yang digunakan membongkar peristiwa yang terjadi terlalu terlambat untuk JavaScript untuk menggugurkan navigasi.

Gunakan onunload.

Untuk jQuery, saya pikir ini bekerja seperti:

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

Yang menunjukkan pesan kesalahan mungkin duplikat pesan kesalahan browser sudah menampilkan. Di chrome, 2 mirip pesan kesalahan yang ditampilkan satu demi satu dalam jendela yang sama.

Di chrome, teks yang ditampilkan setelah pesan khusus adalah: "Apakah anda yakin ingin meninggalkan halaman ini?". Di firefox, tidak menampilkan kustom kami pesan kesalahan sama sekali (tapi masih menampilkan dialog).

Yang lebih tepat pesan kesalahan akan menjadi:

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

Atau stackoverflow gaya: "Anda telah mulai menulis atau mengedit posting."

Jika anda menangkap browser kembali/maju tombol dan don't ingin untuk menavigasi, anda dapat menggunakan:

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
    }
});

Jika tidak, anda dapat menggunakan beforeunload acara, tapi pesan yang mungkin atau mungkin tidak bekerja cross-browser, dan membutuhkan kembali sesuatu yang memaksa built-in cepat.