Перехват события выхода страницы

Question

При редактировании страницы в моей системе пользователь может решить перейти на другой веб-сайт и тем самым потерять все исправления, которые они не сохранили.

Я хотел бы перехватить любую попытку перейти на другую страницу и предложить пользователю убедиться, что они хотят, чтобы это произошло, поскольку они могут потерять свою текущую работу.

Gmail делает это очень похоже. Например, составьте новое письмо, начните вводить текст в тело сообщения и введите новое местоположение в адресной строке (скажем, twitter.com или что-то еще). Он спросит: «Вы уверены?»

Идеи, как копировать это? Я нацелен на IE8, но хотел бы быть совместимым с FF & Chrome.

Answer 1

Подобный ответ Ghommey, но это также поддерживает старые версии IE и Firefox.

window.onbeforeunload = function (e) { 
    var message = "Your confirmation message goes here.", 
    e = e || window.event; 
    // For IE and Firefox 
    if (e) { 
    e.returnValue = message; 
    } 

    // For Safari 
    return message; 
}; 

Answer 2

См. Эту статью. Функция вы ищете является onbeforeunload

Пример кода:

<script language="JavaScript"> 
    window.onbeforeunload = confirmExit; 
    function confirmExit() 
    { 
    return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?"; 
    } 
</script> 

Answer 3

Вместо раздражающих всплывающих подтверждения, было бы неплохо, чтобы задержки, оставляя только немного (несколько миллисекунд), чтобы успешно управлять размещая несохраненные данные на сервер, который мне удалось на моем сайте, используя написание манекен текста на консоль, как это:

window.onbeforeunload=function(e){ 
    // only take action (iterate) if my SCHEDULED_REQUEST object contains data   
    for (var key in SCHEDULED_REQUEST){ 
    postRequest(SCHEDULED_REQUEST); // post and empty SCHEDULED_REQUEST object 
    for (var i=0;i<1000;i++){ 
     // do something unnoticable but time consuming like writing a lot to console 
     console.log('buying some time to finish saving data'); 
    }; 
    break; 
    }; 
}; // no return string --> user will leave as normal but data is send to server 

Edit: Смотрите также Synchronous_AJAX и как сделать это с jquery

Answer 4

У меня есть пользователи, которые не заполняют все необходимые данные.

<cfset unloadCheck=0>//a ColdFusion precheck in my page generation to see if unload check is needed 
var erMsg=""; 
$(document).ready(function(){ 
<cfif q.myData eq ""> 
    <cfset unloadCheck=1> 
    $("#myInput").change(function(){ 
     verify(); //function elsewhere that checks all fields and populates erMsg with error messages for any fail(s) 
     if(erMsg=="") window.onbeforeunload = null; //all OK so let them pass 
     else window.onbeforeunload = confirmExit(); //borrowed from Jantimon above; 
    }); 
}); 
<cfif unloadCheck><!--- if any are outstanding, set the error message and the unload alert ---> 
    verify(); 
    window.onbeforeunload = confirmExit; 
    function confirmExit() {return "Data is incomplete for this Case:"+erMsg;} 
</cfif>