Comment annuler le chargement d'une ressource HTML externe, à partir de JavaScript?

Question

J'écris un widget JavaScript, qui est destiné à être utilisé sur un autre site web et charge des fichiers script supplémentaires à partir de mon propre site web (ce qui signifie fondamentalement pas de XHR en raison de limitations inter-domaines). Maintenant, je veux gérer les échecs avec élégance - si un script ne parvient pas à charger, je veux charger le script à partir d'un serveur alternatif.

J'ai réussi à gérer les défaillances de serveur où le 1er serveur renvoie une erreur, mais je veux également gérer un délai d'attente - si le 1er serveur prend trop de temps pour répondre, je veux abandonner le chargement. Le problème est que je peux configurer un délai d'attente pour déclencher une méthode qui bascule vers le serveur secondaire, mais le script du serveur secondaire ne se charge pas correctement jusqu'à ce que le navigateur lui-même expire sur la demande d'origine - ce qui est trop long pour mes besoins. Je veux être en mesure de - pendant que la première balise < script> est en cours de chargement - abandonner la charge, et ajouter une deuxième balise < script qui pointe vers le serveur alternatif.

J'ai essayé de définir l'attribut src du script original sur null, et même de supprimer la balise de l'élément HEAD en utilisant removeNode(), mais sans effet.

Tout cela a été essayé sur Firefox - Je n'ai pas encore essayé IE, mais la solution doit fonctionner sur les deux. J'aimerais entendre des suggestions.

Answer 1

Malheureusement, il n'est pas possible d'annuler la demande d'étiquettes. Historiquement, les navigateurs n'autorisent que deux requêtes en même temps pour un même nom d'hôte. Il devrait donc être possible de charger le deuxième script à partir d'un autre serveur.

Commencez-vous le chargement du script avant body.onload? Pour un chargement de page normal, le navigateur attend que chaque script soit chargé avant de continuer car les scripts peuvent modifier le document. Si le script ne modifie pas le document, vous pouvez utiliser l'attribut defer afin que le navigateur continue de rendre le document pendant le chargement de votre script.

jQuery a quelques requêtes ouvertes sur une fonction similaire: http://dev.jquery.com/ticket/1863 http://dev.jquery.com/ticket/3442

Answer 2

Je pense que vous pourriez vouloir structurer votre widget pour utiliser XMLHttpRequest qui peut être annulé via window.setTimeout().

Answer 3

Si vous pouvez modifier le script qui est en cours de chargement, vous pouvez ajouter un rappel là-bas. Réglez simplement une minuterie en haut de votre page et effacez-la au bas de votre fichier de script. De cette façon, si votre script ne se charge pas correctement, la requête de sauvegarde sera exécutée à l'expiration du délai.

En haut de votre page exécutez ce qui suit dans un bloc de script en ligne:

doneLoading = function() { 
    clearTimeout(timeout); 
} 

timeout = setTimeout(function() { 
      ... change the .src on the old inline script element here ... 
        }, 15000); 

Au bas de votre fichier JavaScript externe il suffit d'appeler doneLoading(). Si votre requête initiale dure plus de 15 secondes, une nouvelle requête sera envoyée à un serveur de sauvegarde. Je ne pense pas que vous pouvez annuler la demande initiale, mais la demande de sauvegarde s'exécutera comme prévu.