OnBeforeUnload iletişim kutusunu nasıl geçersiz kılabilir ve kendim ile nasıl değiştirebilirim?

Bir sayfadan ayrılmadan önce kullanıcıları kaydedilmemiş değişiklikler konusunda uyarmam gerekiyor (oldukça yaygın bir sorun).

window.onbeforeunload=handler

Bu çalışır, ancak kendi metnimi saran rahatsız edici standart bir mesajla varsayılan bir iletişim kutusu oluşturur. Ben tamamen standart mesajı değiştirmek gerekir, bu yüzden benim metin açık, ya da (daha iyi) jQuery kullanarak kalıcı bir iletişim kutusu ile tüm iletişim yerine.

Şimdiye kadar başarısız oldum ve cevabı olan başka birini bulamadım. Hatta mümkün mü?

Sayfamdaki Javascript:

<script type="text/javascript">   
   window.onbeforeunload=closeIt;
</script>

CloseIt () işlevi:

function closeIt()
{
  if (changes == "true" || files == "true")
  {
      return "Here you can append a custom message to the default dialog.";
  }
}

JQuery ve jqModal kullanarak (özel bir onay iletişim kutusunu kullanarak) bu tür bir şey denedim:

$(window).beforeunload(function() {
        confirm('new message: ' + this.href + ' !', this.href);
        return false;
    });

ki bu da işe yaramıyor - yük öncesi olayına bağlanamıyorum.

İçin varsayılan diyalogu değiştiremezsiniz onbeforeunload, bu nedenle en iyi bahsiniz onunla çalışmak olabilir.

window.onbeforeunload = function() {
    return 'You have unsaved changes!';
}

İşte Microsoft'tan buna bir referans :

Window.event öğesinin returnValue özelliğine bir dize atandığında, kullanıcılara geçerli sayfada kalma ve kendisine atanan dizeyi tutma seçeneği sunan bir iletişim kutusu görüntülenir. "Bu sayfadan uzaklaşmak istediğinizden emin misiniz? ... iletişim kutusunda görüntülenen varsayılan ifade, devam etmek için Tamam'a veya geçerli sayfada kalmak için İptal'e basın." Kaldırılamaz veya değiştirilemez.

Sorun şu şekilde gözüküyor:

1. Arandığında onbeforeunload, işleyicinin dönüş değerini olarak alacaktır window.event.returnValue.
2. Daha sonra döndürülen değeri bir dize olarak ayrıştırır (boş değilse).
3. Yana falsebir dize olarak ayrıştırılır, diyalog kutusu uygun geçecek olan ateş alır true/ false.

Sonuç, atama bir yol olarak görünmüyor olduğu falseiçin onbeforeunloadvarsayılan diyalog engellemek için.

JQuery hakkında ek notlar:

• Olayı jQuery'de ayarlamak sorunlu olabilir , çünkü diğer onbeforeunloadolaylar da gerçekleşebilir. Yalnızca unload etkinliğinizin gerçekleşmesini istiyorsanız bunun için düz ol JavaScript'e bağlı kalacağım.

• jQuery için bir kısayol yoktur, onbeforeunloadbu nedenle genel bindsözdizimini kullanmanız gerekir .

  $(window).bind('beforeunload', function() {} );

Edit 09/04/2018 : Yüksüz iletişim kutularındaki özel mesajlar, krom-51'den beri kullanımdan kaldırıldı (cf: sürüm notu )

JQuery kullanarak ve IE8, Chrome ve Firefox'ta test edilen benim için işe yarayan şey:

$(window).bind("beforeunload",function(event) {
    if(hasChanged) return "You have unsaved changes";
});

IE ve diğer tarayıcı davranışları arasında farklılıklar olduğu için herhangi bir bilgi istemi gerekmiyorsa hiçbir şey döndürmemek önemlidir.

Bazı durumlarda kutuyla ilgili yapabileceğiniz herhangi bir şey olmasa da, bir bağlantıyı tıklatarak birini engelleyebilirsiniz. Benim için, bu çoğu senaryo için çabaya değerdi ve bir yedek olarak, boşaltma olayından ayrıldım.

Standart jQuery İletişim Kutusu yerine Boxy kullandım, burada bulabilirsiniz: http://onehackoranother.com/projects/jquery/boxy/

$(':input').change(function() {
    if(!is_dirty){
        // When the user changes a field on this page, set our is_dirty flag.
        is_dirty = true;
    }
});

$('a').mousedown(function(e) {
    if(is_dirty) {
        // if the user navigates away from this page via an anchor link, 
        //    popup a new boxy confirmation.
        answer = Boxy.confirm("You have made some changes which you might want to save.");
    }
});

window.onbeforeunload = function() {
if((is_dirty)&&(!answer)){
            // call this if the box wasn't shown.
    return 'You have made some changes which you might want to save.';
    }
};

Başka bir etkinliğe ekleyebilir ve ne tür bir çapa tıklatıldığına daha fazla filtre uygulayabilirsiniz, ancak bu benim için çalışıyor ve ne yapmak istediğimi ve başkalarının kullanması veya iyileştirmesi için bir örnek olarak hizmet ediyor. Bu çözümü isteyenler için bunu paylaşacağımı düşündüm.

Ben bu yüzden olduğu gibi çalışmayabilir, bu yüzden kodu kesti.

1) Yüklemeden önce kullanın, onun yüklemesini kullanmayın.

2) Önemli olan, bir iade ifadesinin yürütülmesinden kaçınmaktır. Bununla, işleyicinizden dönmekten kaçınmak istemiyorum. Tamam, ancak bunu işlevin sonuna ulaştığınızdan ve bir return deyimi yürütmediğinizden emin olarak yaparsınız. Bu koşullar altında yerleşik standart iletişim kutusu oluşmaz.

3) onbeforeunload kullanırsanız, sunucudan toparlanmak için unbeforeunload işleyicinizde bir ajax çağrısı çalıştırabilirsiniz, ancak bu eşzamanlı olmalıdır ve beklemeden önce boşaltma işleyicinizde yanıtı beklemek ve işlemek zorundasınız (yine de (2) durumu). Bunu yapıyorum ve iyi çalışıyor. Senkronize bir ajax çağrısı yaparsanız, yanıt geri gelene kadar her şey beklemeye alınır. Sunucudan gelen yanıtı umursamadığınızı düşünerek eşzamansız bir işlem yaparsanız, sayfa kaldırma işlemi devam eder ve ajax çağrınız bu işlem tarafından iptal edilir - çalışıyorsa uzak bir komut dosyası da dahil.

return;Mesaj yerine bir yer koymayı deneyin . Bu benim için çoğu tarayıcıyı çalıştırıyor. (Bu yalnızca iletişim kutusunun hediyelerini gerçekten engeller)

window.onbeforeunload = function(evt) {            
        //Your Extra Code
        return;
}

Bu, spam göndermeyi önlemek için şimdi kromda yapılamaz, daha fazla ayrıntı için özel mesaj gösterilmeden önceki javascript'e bakın .

Kullanıcı tarafından hangi düğmeye (ok veya iptal) basıldığını tespit edebilirsiniz, çünkü onun yükleme işlevi yalnızca kullanıcı sayfadan ayrılmayı seçtiğinde çağrılır. Bu işlevde olasılıklar sınırlıdır, çünkü DOM çöker. Javascript çalıştırabilirsiniz, ancak ajax POST hiçbir şey yapmaz, bu nedenle otomatik çıkış için bu yöntemi kullanamazsınız. Ama bunun bir çözümü var. Window.open ('logout.php') onun yükleme işlevinde yürütülür, böylece kullanıcı yeni bir pencere açıklığı ile oturumu kapatır.

function onunload = (){
    window.open('logout.php');
}

Bu kod, kullanıcı sayfadan ayrıldığında veya etkin pencereyi kapattığında ve 'logout.php' tarafından çıkış yapan kullanıcı tarafından çağrılır. Çıkış php koddan oluştuğunda yeni pencere hemen kapanır:

window.close();

Aynı sorunla karşı karşıya kaldım, mesajımla kendi iletişim kutusunu almak için iyiydim, ancak karşılaştığım sorun şuydu: 1) Sadece yakın tıklama için istediğim tüm navigasyonlarda mesaj veriyordu. 2) Kullanıcı iptal etmeyi seçerse kendi onay mesajımla hala tarayıcının varsayılan iletişim kutusunu gösterir.

Ana sayfamda yazdığım bulduğum çözüm kodu aşağıdadır.

function closeMe(evt) {
    if (typeof evt == 'undefined') {
        evt = window.event; }
    if (evt && evt.clientX >= (window.event.screenX - 150) &&
        evt.clientY >= -150 && evt.clientY <= 0) {
        return "Do you want to log out of your current session?";
    }
}
window.onbeforeunload = closeMe;

 <script type="text/javascript">
        window.onbeforeunload = function(evt) {
            var message = 'Are you sure you want to leave?';
            if (typeof evt == 'undefined') {
                evt = window.event;
            }       
            if (evt) {
                evt.returnValue = message;
            }
            return message;
        } 
    </script>

http://www.codeprojectdownload.com adresinden bakın

"Bağlama" komutu "one" ın özel sürümünü kullanmaya ne dersiniz? Olay işleyici ilk kez yürütüldüğünde, olay işleyici olarak otomatik olarak kaldırılır.

$(window).one("beforeunload", BeforeUnload);

Açısal 9 yaklaşımı:

constructor() {
    window.addEventListener('beforeunload', (event: BeforeUnloadEvent) => {
     if (this.generatedBarcodeIndex) {
      event.preventDefault(); // for Firefox
      event.returnValue = ''; // for Chrome
      return '';
     }
     return false;
    });
   }

Tarayıcılar desteği ve özel mesajın kaldırılması:

• Chrome, 51 dakika içinde özel mesaj desteğini kaldırdı
• Opera, 38 dakika içinde özel mesaj desteğini kaldırdı
• Firefox, 44.0 dakikada ver özel mesaj desteğini kaldırdı
• Safari, 9.1 dakika süresinde özel mesaj desteğini kaldırdı