Comment envoyer de manière fiable une requête cross-domain et cross browser à la page de déchargement

Question

J'ai un code javascript qui est chargé par des tiers. Le javascript garde la trace d'un certain nombre de mesures, et lorsqu'un utilisateur quitte la page, je souhaite renvoyer les statistiques à mon serveur.

En raison de contrôles XSS dans certains navigateurs, comme IE, je ne peux pas faire un simple appel jquery.ajax(). Au lieu de cela, j'ajoute une image src à la page avec jquery. Voici le code, tubé par navigateur:

function record_metrics() { 
     //Arbitrary code execution here to set test_url 
     $esajquery('#MainDiv').append("<img src='" + test_url + "' />"); 
    } 

    if ($esajquery.browser.msie) { 
     window.onbeforeunload = function() { record_metrics(); } 
    } else { 
     $esajquery(window).unload(
      function(){ record_metrics(); } 
     ); 
    } 

FF avorte la demande « test_url » si j'utilise window.onbeforeunload, et IE8 ne fonctionne pas avec la décharge de jquery(). IE8 ne fonctionne pas non plus si le code du paramètre test_url est trop long, bien que IE8 semble fonctionner correctement s'il est immédiatement ajouté au DOM.

Y at-il une meilleure façon de résoudre ce problème? Malheureusement, cela doit vraiment s'exécuter lorsqu'un utilisateur quitte la page.

Answer 1

D'après ce que je me souviens, certains navigateurs acceptent uniquement une chaîne de texte pour le résultat onbeforeunload. Essayez quelque chose comme ceci:

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

Je ne sais pas, mais cela pourrait même travailler pour tous les navigateurs, mais je ne devine à ce stade.

p.s. aussi voir How can I override the OnBeforeUnload dialog and replace it with my own?

Answer 2

Pour l'amour de la postérité, voici ce que je fini par faire:

if ($.browser.msie) { 
    window.onbeforeunload = function() { $('#div1').append("<img src='record_call' />"); 
} else { 
    $(window).unload(
     if ($.browser.webkit) { 
      $.ajax(url:record_call, async:false); 
     } else { 
      $('#div1').append("<script src='record_call' />"); 
     } 
    ); 
} 

Je trouve que IE fonctionne annexant un img, mais pas un script, peut-être parce que le script est plus gourmand en ressources et coupes avant d'essayer de le charger. Pour webkit, l'ajout d'un script fonctionne parfois, mais l'ajout d'une image n'a jamais semblé fonctionner. Enfin, je choisis par défaut le script (principalement pour FF) car les anciennes versions de navigateurs semblent toutes bien fonctionner avec. IE bloque l'appel AJAX utilisé par webkit à cause de xss.

En outre, IE ne fonctionne jamais avec la fonction de déchargement jquery, et les autres navigateurs ne fonctionnent pas avec onbeforeunload, alors celles-ci doivent être tubé. Ce n'est certainement pas une belle solution, mais cela fonctionne la plupart du temps.

Answer 3

Vous devriez jeter un oeil à la bibliothèque easyXDM

http://easyxdm.net/

Je pense que ça va rendre votre travail facile en ce qui concerne la limitation mis en place par la même politique Origine

Answer 4

une tête pour ceux qui essaient d'utiliser la méthode de Agmin ci-dessus: Lorsque vous utilisez la méthode append() jQuery pour ajouter une balise de script, le câblage jQuery interne utilise jQuery.ajax() pour exécuter le script, donc si la balise de script vous annexant est sur un autre domaine, la politique même origine empêchera la script d'être exe coupé.