Kısa, yanlış cevap:
Bunu , beforeunloadolayı işleyip boş olmayan bir dize döndürerek yapabilirsiniz :
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = 'It looks like you have been editing something. '
+ 'If you leave before saving, your changes will be lost.';
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
});
Bu yaklaşımdaki sorun, form göndermenin de boşaltma olayını tetiklemesidir . Bu, bir form gönderdiğiniz bayrak ekleyerek kolayca giderilir:
var formSubmitting = false;
var setFormSubmitting = function() { formSubmitting = true; };
window.onload = function() {
window.addEventListener("beforeunload", function (e) {
if (formSubmitting) {
return undefined;
}
var confirmationMessage = 'It looks like you have been editing something. '
+ 'If you leave before saving, your changes will be lost.';
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
});
};
Sonra gönderirken ayarlayıcıyı arayın:
<form method="post" onsubmit="setFormSubmitting()">
<input type="submit" />
</form>
Ama okuyun ...
Uzun, doğru cevap:
Kullanıcı, formlarınızda hiçbir şey değiştirmediğinde de bu mesajı göstermek istemezsiniz . Çözümlerden biri, beforeunloadolayı yalnızca gerçekten ilgili olduğunda istemi tetikleyen "kirli" bir bayrakla birlikte kullanmaktır .
var isDirty = function() { return false; }
window.onload = function() {
window.addEventListener("beforeunload", function (e) {
if (formSubmitting || !isDirty()) {
return undefined;
}
var confirmationMessage = 'It looks like you have been editing something. '
+ 'If you leave before saving, your changes will be lost.';
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
});
};
Şimdi isDirtyyöntemi uygulamak için çeşitli yaklaşımlar var.
JQuery ve form serileştirmeyi kullanabilirsiniz , ancak bu yaklaşımın bazı kusurları vardır. Öncelikle kodu herhangi bir form üzerinde çalışacak şekilde değiştirmeniz gerekir ( $("form").each()yapacak), ancak en büyük sorun jQuery'nin serialize()yalnızca adlandırılmış, devre dışı olmayan öğeler üzerinde çalışacağıdır, bu nedenle herhangi bir devre dışı veya adlandırılmamış öğeyi değiştirmek kirli bayrağı tetiklemez. Bunun için geçici çözümler var kontrolleri etkinleştirmek, serileştirmek ve sonra tekrar devre dışı bırakmak yerine kontrolleri salt okunur yapmak gibi .
Yani olaylar gidilecek yol gibi görünüyor. Tuşlara basmayı dinlemeyi deneyebilirsiniz . Bu etkinliğin birkaç sorunu var:
- Onay kutuları, radyo düğmeleri veya fare girişi ile değiştirilen diğer öğeler üzerinde tetiklenmez.
- CtrlAnahtar gibi alakasız tuş basışlarını tetikler .
- JavaScript kodu ile ayarlanan değerlerde tetiklenmez.
- Bağlam menüleri aracılığıyla metin kesmeyi veya yapıştırmayı tetiklemez.
- Datepickers veya onay kutusu / radyo düğmesi güzelleştiricileri gibi değerlerini JavaScript aracılığıyla gizli bir girişe kaydeden sanal girişler için çalışmaz.
changeOlay da JavaScript kodundan belirlenen değerlere tetiklemez yüzden de, sanal girişler için olmaz işi.
Bağlama inputtüm olay inputs (ve textareas ve selects) sayfanızda olmaz eski tarayıcılarda çalışması tüm olay işleme çözümleri gibi ve, geri alma desteklemez, yukarıda bahsedilen. Kullanıcı bir metin kutusunu değiştirip geri alırsa veya bir onay kutusunu işaretleyip işaretini kaldırırsa, form hala kirli kabul edilir.
Ve belirli unsurları göz ardı etmek gibi daha fazla davranış uygulamak istediğinizde, daha da fazla işiniz olacak.
Tekerleği yeniden icat etmeyin:
Dolayısıyla, bu çözümleri ve gerekli tüm geçici çözümleri uygulamayı düşünmeden önce, tekerleği yeniden icat ettiğinizi ve başkalarının sizin için zaten çözdüğü sorunlarla karşılaşmaya eğilimli olduğunuzu anlayın.
Uygulamanız zaten jQuery kullanıyorsa, kendi yuvarlamak yerine test edilmiş, bakımı yapılmış bir kod kullanabilir ve bunların tümü için bir üçüncü bölüm kitaplığı kullanabilirsiniz. jQuery Emin misiniz? eklenti harika çalışıyor, demo sayfalarına bakın . Bu kadar basit:
<script src="jquery.are-you-sure.js"></script>
<script>
$(function() {
$('#myForm').areYouSure(
{
message: 'It looks like you have been editing something. '
+ 'If you leave before saving, your changes will be lost.'
}
);
});
</script>
Her yerde desteklenmeyen özel mesajlar
Firefox 4'ün bu iletişim kutusunda özel mesajları desteklemediğini unutmayın . Nisan 2016 itibarıyla, özel mesajların da kaldırıldığı Chrome 51 kullanıma sunuldu .
Bu sitenin başka yerlerinde bazı alternatifler var, ancak bunun gibi bir iletişim kutusunun yeterince açık olduğunu düşünüyorum:
Bu siteden ayrılmak istiyor musunuz?
Yaptığınız değişiklikler kaydedilemeyebilir.
Leave Stay