Safari führt keine Callback-Funktion bei Aktualisierung/onbeforeunload auf Serverseite aus (ruft clientseitigen Code)

Question

Ich versuche, einige Anforderungen an die Datenbank zu senden, wenn das Fenster entladen wird (d. H. Wenn Sie die Seite aktualisieren). Aus irgendeinem Grund wird nur auf Safari der clientseitige Code ausgeführt, aber die Anforderung an den Server wird nie ausgeführt. Wenn ich den Code im Debugger manuell durchtrete, erhält der Server die Anfrage und verarbeitet sie einwandfrei.

Wer weiß, warum das passiert?

window.onbeforeunload = function() { 
 
    console.log("inside on before unload"); 
 
    var requestParam = new a.ListRequest(); 
 
    requestParam.setAction('set_delete'); 
 
    
 
    var callback = function(isSuccess, response) { 
 
    if (isSuccess) { 
 
     //do something 
 
    } else { 
 
     // do something else 
 
    } 
 
    }; 
 
    
 
    // Sends request to server 
 
    a.Fetch.list(requestParam, callback); 
 
    
 
}

Answer 1

wahrscheinlich die Anforderung, die in der Fetch Aufruf geschieht asynchron und Safari wartet nicht auf sie, bevor sie zu der nächsten Seite beenden zu/die Registerkarte zu schließen. Wenn Sie den Anruf synchron ausführen können, sollte es funktionieren. Beachten Sie, dass synchrone Aufrufe in einigen Tools generell nicht empfohlen und nicht mehr empfohlen werden.

Diese Antwort im Zusammenhang mit JQuery hat eine gute Erklärung für synchrone Aufrufe: https://stackoverflow.com/a/11755262/1341437

Answer 2

Sie können Beacon API (FF, Chrome, Opera) verwenden:

window.addEventListener('unload', logData, false); 

function logData() { 
    navigator.sendBeacon("/log", analyticsData); 
} 

Benutzerprogramme werden in der Regel asynchron ignorieren XMLHttpRequests gemacht in ein Entladehandler. Um dieses Problem zu lösen, erstellt der Analyse- und Diagnosecode typischerweise einen synchronen XMLHttpRequest in einem unload oder beforeunload Handler, um die Daten zu übermitteln. Der synchrone XMLHttpRequest zwingt den Benutzeragenten, das Entladen des Dokuments zu verzögern, und die nächste Navigation scheint langsamer zu sein. Es gibt nichts, was die nächste Seite tun kann, um diese Wahrnehmung einer schlechten Seitenlastleistung zu vermeiden.

Mit der sendBeacon() Methode werden die Daten asynchron zum Webserver übertragen, wenn der User Agent dazu Gelegenheit hatte, ohne das Entladen zu verzögern oder die Leistung der nächsten Navigation zu beeinträchtigen.

Answer 3

Sie können es mit jQuery.ajax durch setzen der Asynchron-Eigenschaft auf false async:false

window.onbeforeunload = function() { 
    $.ajax({ 
     // Query to server 
     async:false, 
     method: "GET", 
     url: "your.page", 
     data: { param1 : "value1" } 
    }).done(function(jqXHR, textStatus) { 
     // Verify good data 
     // Do stuff 
     alert("Request done: " + textStatus); 
    }).fail(function(jqXHR, textStatus) { 
     alert("Request failed: " + textStatus); 
    }); 
} 

Answer 4

Wie @craigts sagte, wird der Browser, bevor der Anruf kann zurückgegeben werden, Ajax gegangen. Sie könnten auf dieser Seite noch ein paar Sekunden erhalten.

window.onbeforeunload = function(e) { 
    return 'Dialog text here.'; 
}; 

Allerdings werden Ihre Benutzer das lästig finden.

Zweite Option, finden Sie ein anderes Ereignis, anstatt auf das Entladen der Seite zu warten. Erfassen Sie Ihre Daten fortlaufend. Capture es onChange. Wird der Benutzer einen Link verwenden, um fortzufahren? Wenn dies der Fall ist, können Sie die Verbindung mit cancelEvent() entführen und dann fortfahren, nachdem der Ajax zurückgegeben wurde.