Zdarzenie wychodzące strony przechwytywania

Question

Podczas edytowania strony w moim systemie użytkownik może zdecydować się na przejście do innej witryny internetowej, co może spowodować utratę wszystkich zmian, które nie zostały zapisane.

Chciałbym przechwycić każdą próbę przejścia na inną stronę i zachęcić użytkownika do upewnienia się, że tak się stanie, ponieważ potencjalnie mogliby stracić bieżącą pracę.

Gmail robi to w bardzo podobny sposób. Na przykład utwórz nową wiadomość e-mail, zacznij pisać w treści wiadomości i wprowadź nową lokalizację na pasku adresu (na przykład twitter.com lub coś podobnego). Pojawi się pytanie "Czy jesteś pewien?"

Pomysły, jak skopiować to? Celuję w IE8, ale chcę też być kompatybilny z FF & Chrome.

Answer 1

podobne do odpowiedzi Ghommey, ale ten obsługuje również starsze wersje IE i 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

Zobacz ten artykuł. Funkcja szukasz jest onbeforeunload

przykładowy kod:

<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

Zamiast irytujące okienko potwierdzenia, byłoby miło opóźnienia pozostawiając tylko trochę (sprawy milisekund) do zarządzania powodzeniem zamieszczając niezapisane dane do serwera, który udało mi do mojej strony za pomocą pisma manekin tekst do konsoli tak:

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: Zobacz również Synchronous_AJAX i jak to zrobić z jquery

Answer 4

Mam użytkowników, którzy nie uzupełnili wszystkich wymaganych danych.

<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>