JavaScript kullanarak bir web sayfasının başka yere gitmesini önleyin

JavaScript kullanarak bir web sayfasının başka yere gitmesi nasıl engellenir?

Kullanmak onunloadmesajları görüntülemenize izin verir, ancak navigasyonu kesintiye uğratmaz (çünkü çok geç). Ancak, kullanılması onbeforeunloadnavigasyonu kesintiye uğratacaktır:

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

Not: Yeni tarayıcılar, geçersiz kılınamayan "Kaydedilmemiş tüm değişiklikler kaybolacak" gibi bir mesaj sağladığından boş bir dize döndürülür.

Eski tarayıcılarda, istemde görüntülenecek mesajı belirtebilirsiniz:

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

Burada sunulan diğer yöntemlerin aksine, bu kod parçası , tarayıcının, kullanıcıya ayrılmak isteyip istemediğini soran bir uyarı görüntülemesine neden olmaz ; bunun yerine, tarayıcının bellekten kaldırma şansı olmadan önce geçerli sayfaya yeniden yönlendirmek (ve böylece gezinmeyi iptal etmek) için DOM'un olaylı doğasını kullanır.

Doğrudan gezintiyi kısa devre yaparak çalıştığı için sayfanın kapanmasını engellemek için kullanılamaz; ancak, çerçeve bozmayı devre dışı bırakmak için kullanılabilir.

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

Sorumluluk Reddi: Bunu asla yapmamalısınız. Bir sayfada çerçeve bozan kod varsa, lütfen yazarın isteklerine saygı gösterin.

Bu biraz farklı versiyonla bitirdim:

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

Başka bir yerde, form kirlendiğinde kirli bayrağı true olarak ayarlıyorum (veya başka bir şekilde gezinmeyi önlemek istiyorum). Bu, kullanıcının Gezinmeyi Onayla istemini alıp almayacağını kolayca kontrol etmeme olanak tanır.

Seçilen cevaptaki metinle, gereksiz istemler görürsünüz:

Modern addEventListener API'lerini kullanarak daha modern ve tarayıcı uyumlu bir şekilde eşdeğeri.

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

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

Ayman örneğinde false döndürerek tarayıcı penceresinin / sekmesinin kapanmasını engellersiniz.

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

JQuery 1.11'de kabul edilen cevaba eşdeğer:

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

JSFiddle örneği

altCognito'nun cevabı unload, JavaScript'in navigasyonu iptal etmesi için çok geç olan olayı kullandı .

Onunload kullanın .

JQuery için bunun şu şekilde çalıştığını düşünüyorum:

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

Önerilen bu hata mesajı, tarayıcının halihazırda görüntülediği hata mesajının aynısını oluşturabilir. Chrome'da, aynı pencerede birbiri ardına 2 benzer hata mesajı görüntülenir.

Chrome'da, özel mesajdan sonra görüntülenen metin şudur: "Bu sayfadan ayrılmak istediğinizden emin misiniz?". Firefox'ta, özel hata mesajımızı göstermez (ancak yine de iletişim kutusunu görüntüler).

Daha uygun bir hata mesajı şöyle olabilir:

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

Veya stackoverflow stili: "Bir gönderi yazmaya veya düzenlemeye başladınız."

Bir tarayıcı geri / ileri düğmesini yakalıyorsanız ve başka bir yere gitmek istemiyorsanız, şunları kullanabilirsiniz:

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

Aksi takdirde, beforeunload olayını kullanabilirsiniz , ancak mesaj tarayıcılar arası çalışabilir veya çalışmayabilir ve yerleşik bir komut istemini zorlayan bir şeyin döndürülmesini gerektirir.