jquery - JavaScript før du forlater siden

Jeg vil lage en bekreftelse før brukeren forlater siden. Hvis han sier ok, vil det omdirigere til en ny side, eller avbryte å forlate. Jeg prøvde å lage det med onunload

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

Men bekrefter det etter at siden allerede er lukket? Hvordan gjør man det riktig?

Det hadde vært enda bedre om noen viste hvordan man gjør det med jQuery?

Svar #1

onunload (eller onbeforeunload) kan ikke omdirigere brukeren til en annen side. Dette er av sikkerhetsgrunner.

Hvis du vil vise en ledetekst før brukeren forlater siden, bruk onbeforeunload:

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

Eller med jQuery:

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

Dette vil bare spørre brukeren om de vil forlate siden eller ikke, du kan ikke omdirigere dem hvis de velger å bli på siden. Hvis de velger å forlate, vil nettleseren gå dit de sa den skulle gå.

Du kan bruke onunload for å gjøre ting før siden lastes ut, men du kan ikke omdirigere derfra (Chrome 14+ blokkerer varsler inne i onunload):

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

Eller med jQuery:

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

Svar #2

Denne koden når du også oppdager at skjemaets tilstand endres eller ikke.

$('#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.
});

Du kan google JQuery Form Serialize-funksjonen, dette samler alle skjemainndata og lagrer dem i arrayet. Jeg antar denne forklaringen er nok :)

Svar #3

Dette er hva jeg gjorde for å vise bekreftelsesmeldingen bare når jeg har usikrede data

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

å returnere undefined vil deaktivere bekreftelsen

Merk: å returnere null vil ikke fungere med IE

Du kan også bruke undefined for å deaktivere bekreftelsen

window.onbeforeunload = undefined;

Svar #4

Dette vil varsle når du forlater nåværende side

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

Svar #5

Du kan bruke følgende én-liner for å alltid spørre brukeren før du forlater siden.

window.onbeforeunload = s => "";

For å spørre brukeren når noe på siden har blitt endret, se dette svaret.

Svar #6

For å ha en popup med Chrome 14+, må du gjøre følgende:

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

Brukeren vil bli spurt om han vil bli eller dra.

Relaterte artikler