Sayfadan ayrılmadan önce JavaScript

233

Kullanıcı sayfadan ayrılmadan önce onaylamak istiyorum. Tamam diyorsa, yeni sayfaya yönlendirir veya ayrılmayı iptal eder. Onunload ile yapmaya çalıştım

<script type="text/javascript">
function con() {
    var answer = confirm("do you want to check our other products")
    if (answer){

        alert("bye");
    }
    else{
        window.location = "http://www.example.com";
    }
}
</script>
</head>

<body onunload="con();">
<h1 style="text-align:center">main page</h1>
</body>
</html>

Ancak sayfa zaten kapatıldıktan sonra onaylanıyor mu? Düzgün nasıl yapılır?

Birisi jQuery ile nasıl yapılacağını gösterirse daha iyi olurdu?

javascript jquery

— KD7
kaynak

1

ha ha ha ... Evet, bu oldukça doğru ... ama neyse ki benim sitem değil ... müvekkilim onun tarafında yapmak istiyor

— kd7

25

Ya, ancak kaydedilmemiş bir Gmail sayfasından çıkmak üzereyken bu uyarıları gördüğüme çok sevindim.

— Etdashou

Not yalnızca bir varsayılan mesajla 4+ Firefox yerine özel mesaj görüntülenir developer.mozilla.org/en-US/docs/Web/Events/beforeunload#Notes

— baptx

4

Kaydedilmemiş değişikliklerle web sayfasından ayrılmadan önce kullanıcıyı uyarmanın

— Wasim A.

352

onunload(veya onbeforeunload) kullanıcıyı başka bir sayfaya yönlendiremez. Bu güvenlik nedeniyle.

Kullanıcı sayfadan ayrılmadan önce bir istem göstermek istiyorsanız, şunu kullanın onbeforeunload:

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

Veya jQuery ile:

$(window).bind('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

Bu, kullanıcıya yalnızca sayfadan ayrılmak isteyip istemediklerini soracaktır, sayfada kalmayı seçmeleri durumunda yönlendiremezsiniz. Ayrılmayı seçerse, tarayıcı gitmelerini söyledikleri yere gidecektir.

onunloadSayfa kaldırılmadan bir şeyler yapmak için kullanabilirsiniz , ancak oradan yönlendiremezsiniz (Chrome 14+ içerideki uyarıları engeller onunload):

window.onunload = function() {
    alert('Bye.');
}

Veya jQuery ile:

$(window).unload(function(){
  alert('Bye.');
});

— Roket Hazmatı
kaynak

12

@Joseph: Bir dizeyi döndürdüğünüzde onbeforeunload, tarayıcı bu dizeyi kendi onay kutusuna koyar. Kullanmak confirmişe yaramaz onunloadve onbeforeunloadçünkü yalnızca tarayıcı nereye gideceğini kontrol edebilir, sen değil. Bu demoya göz atın: jsfiddle.net/3kvAC

— Rocket Hazmat

7

Eğer koşullu bir ileti görüntülemek istiyorsanız Sadece bir nota onbeforeunload, return falsebir iletişim tarayıcı şovu "false" yapacaktır. return undefinedKullanıcı uyarısı olmadan pencerenin kapanmasına izin vermek istiyorsanız yapmanız gerekir .

— Dan Fitch

5

@Adam: Firefox bu mesajın özelleştirilmesine izin vermemeye karar verdi. Bu tarayıcının bir parçası olduğundan, bu davranışı geçersiz kılamazsınız. Diğer tarayıcılar da mesajı özelleştirme yeteneğini kaldırıyor olabilir. Bakınız: developer.mozilla.org/tr-TR/docs/Web/API/WindowEventHandlers/…

— Rocket Hazmat

8

@RocketHazmat Chrome da var. Şimdi sadece şöyle diyor: Bu siteden ayrılmak istiyor musunuz? Yaptığınız değişiklikler kaydedilemeyebilir.

— programmer5000

6

@ programmer5000 İyi çünkü bazı kötü amaçlı web siteleri işe yaramaz bazı uyarılar gösterebilir (örneğin "Banka bilgilerinizi vermeden ayrılamazsınız")

— Naman

34

Bu kod, form durumunu da algıladığınızda değişti veya değişmedi.

$('#form').data('serialize',$('#form').serialize()); // On load save form current state

$(window).bind('beforeunload', function(e){
    if($('#form').serialize()!=$('#form').data('serialize'))return true;
    else e=null; // i.e; if form state change show warning box, else don't show it.
});

Google JQuery Form Serileştirme işlevini kullanabilirsiniz, bu tüm form girdilerini toplar ve diziye kaydeder. Sanırım bu açıklama yeterli :)

— Wasim A.
kaynak

bunun neden işe yaramayacağına dair herhangi bir fikir Diğer js fonksiyonları / jquery eklentileri tarafından üzerine yazılabilir mi? Bir webrtc uygulaması çalıştırıyorum ve istemci pencereyi kapattığında bazı şeyler "kapatmak" istiyorum böylece pencereyi kapatmak işlemek gerekir.

— hey

1

Bu başka bir eklenti vb. üzerine yazılabilir, çoğunlukla geliştirici ile hata yaptı, üzerine yazıldığından şüpheleniyorsanız, jquery kodunuzu </body> etiketinin yakınına koyun.

— Wasim A.

Evet ... sayfa yüklendikten sonra giriş alanlarını gizleyen veya devre dışı bırakan bazı JS kodlarınız varsa, gizli \ devre dışı alanları karşılaştırmak için onay yaptığınızda serileştirilmez. Kontrol elbette başarısız olacaktır. ;) Bu geçici çözüm var: stackoverflow.com/a/4748748/114029

— Leniel Maccaferri

Bu arada ... burada daha iyi bir yol var: stackoverflow.com/q/16322042/114029

— Leniel Maccaferri

1

Gönder düğmesine bastığınızda bunun da bir uyarı olacağına dikkat edilmelidir. Bunu önlemek için gönder düğmesine tıklandığında formu tekrar serileştirebilirsiniz.

— Adam

19

Bu, geçerli sayfadan ayrılırken uyarır

<script type='text/javascript'>
function goodbye(e) {
    if(!e) e = window.event;
    //e.cancelBubble is supported by IE - this will kill the bubbling process.
    e.cancelBubble = true;
    e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog

    //e.stopPropagation works in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}
window.onbeforeunload=goodbye; 

</script>

— Ajit Singh
kaynak

14

Bu sadece kaydedilmemiş verilerim olduğunda onay mesajını göstermek için yaptım

window.onbeforeunload = function () {
            if (isDirty) {
                return "There are unsaved data.";
            }
            return undefined;
        }

"tanımsız" değerini döndürmek onaylamayı devre dışı bırakır

Not: "null" döndürmesi IE ile çalışmaz

Ayrıca onaylamayı devre dışı bırakmak için "tanımsız" kullanabilirsiniz

window.onbeforeunload = undefined;

— Mina Matta
kaynak

11

Chrome 14+ ile bir popop sahibi olmak için aşağıdakileri yapmanız gerekir:

jQuery(window).bind('beforeunload', function(){
    return 'my text';
});

Kullanıcıya kalmak mı yoksa ayrılmak mı istediği sorulacaktır.

— David Bélanger
kaynak

Bunun neden çalışmadığına dair bir fikrin var mı? Bir jquery eklentileri ile birlikte krom (son sürüm) kullanıyorum ama pencereyi kapattığımda herhangi bir uyarı almıyorum.

— hey

@hey Neden aşağı oy? Çalışıyor .... Bunun dışında olduğundan emin olmanız gerekiyor jQuery(document)ve tüm eklentileriniz yüklendikten hemen sonra koymanızı öneririm. Ayrıca, bu snippet herhangi bir uyarı yapmaz ... sadece bir demo return.

— David Bélanger

7

Sayfadan ayrılmadan önce kullanıcıya her zaman sormak için aşağıdaki tek astarı kullanabilirsiniz .

window.onbeforeunload = s => "";

Kullanıcıya sayfadaki bir şeyin ne zaman değiştirildiğini sormak için bu cevaba bakın .

— spencer.sm
kaynak

sayfayı yenilersem veya sadece çıkarsam bu da tetiklenir mi?

— Si8

Evet, yenileme veya çıkışta ateşlenir.

— spencer.sm

Yenileme vs ilk kez ne zaman bilmek için yine de var mı?

— Si8

Bir kullanıcı sayfayı yenilemenin aksine sayfaya ilk kez geldiğinde.

— Si8

Oh hayır. Bir kullanıcı sayfaya ilk kez geldiğinde tetiklenmez. Yalnızca sayfaları kapatırken veya değiştirirken veya yenilerken.

— spencer.sm

4

Normalde, kullanıcı bir formda değişiklik yaptığında, ancak kaydedilmediğinde bu mesajı göstermek istersiniz.

Yalnızca kullanıcı bir şeyi değiştirdiğinde bir mesaj göstermek için bu yaklaşımı kullanın

var form = $('#your-form'),
  original = form.serialize()

form.submit(function(){
  window.onbeforeunload = null
})

window.onbeforeunload = function(){
  if (form.serialize() != original)
    return 'Are you sure you want to leave?'
}

— Simon Franzen
kaynak

3

<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">

<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>

<a href="https://www.w3schools.com">Click here to go to w3schools.com</a>

<script>
function myFunction() {
    return "Write something clever here...";
}
</script>

</body>
</html>

https://www.w3schools.com/tags/ev_onbeforeunload.asp

— Emir Mamashov
kaynak

1

Biraz daha yardımcı, etkinleştir ve devre dışı bırak

$(window).on('beforeunload.myPluginName', false); // or use function() instead of false
$(window).off('beforeunload.myPluginName');

— l2aelba
kaynak

1

Kullandığım işte çözümlerin çoğu benim için işe yaramadı biri bulundu burada

Ayrıca onay kutusuna izin vermek veya vermemek için bir değişken ekledim

window.hideWarning = false;
window.addEventListener('beforeunload', (event) => {
    if (!hideWarning) {
        event.preventDefault();
        event.returnValue = '';
    }

});

— Raj Sharma
kaynak