Traitement des erreurs dans le chargement dynamique de JS

Question

Je charge un fichier JS nécessaire uniquement pour une partie de ma page Web, uniquement lorsque l'utilisateur navigue vers cet onglet de la page.

var scriptFile = document.createElement("script");
scriptFile.setAttribute("type", "text/javascript");
scriptFile.setAttribute("src", scriptURL);

J'essaie de mettre au point un mécanisme de gestion des erreurs pour ce chargement dynamique, afin de pouvoir afficher un message d'erreur si le chargement du JS est interrompu ou si le JS n'est pas disponible à l'emplacement spécifié par l'URL.

Voici comment j'essaie de mettre en œuvre la gestion des erreurs (pour IE) :

scriptFile.onreadystatechange = function() { // For IE
    if (this.readyState == 'complete' || this.readyState == 'loaded') {
        // Display content in tab
    } else {
        // Display error message
    }
}

Cela cause un problème. Lorsque tout va bien et que le JS est présent comme prévu, j'obtiens d'abord le message d'erreur, puis le contenu correct.

Après quelques réflexions, j'ai découvert que le readyState passe d'abord de "uninitialized" à "loading", puis à "loaded". C'est lorsque l'état est à "loading" que le message d'erreur s'affiche. Ensuite, l'état passe à "loaded" et le contenu s'affiche.

Avez-vous une idée de la façon de gérer cette situation pour que l'erreur ne s'affiche pas au départ ?

Answer 1

Comme il n'y a pas d'état "oops I died !", vous ne pouvez pas afficher de messages d'erreur.

edit : enlevé le code puisque mon point est que vous ne pouvez pas faire cela. Avec une requête AJAX, vous pouvez vérifier la réponse et voir si c'est un 404 mais vous ne pouvez pas le faire avec une balise script.

edit2 : à la réflexion, pourquoi ne pas récupérer le script via AJAX et injecter un '<script type="text/javascript">' + responseText + '</script>' à l'intérieur de document.body ?

Pour vérifier si une requête AJAX a échoué, vérifiez la propriété status de l'objet XMLHTTPRequest. Si c'est 404, eh bien, c'est un 404.

Aussi, vous ne devriez pas faire ce genre de choses à la main. Je suggère toujours d'utiliser Prototype ou jQuery. Comme j'ai été gâté par Prototype, je ne devrais pas essayer d'expliquer comment vérifier le statut de la requête. Pourquoi ne pas demander comment gérer les requêtes AJAX dans une autre question ici ? Les pros vous diront certainement comment gérer tous les types d'échecs, pas seulement les 404.

Answer 2

Que diriez-vous d'avoir une variable (globale) pour vérifier si elle est chargée (par exemple, le script la définira une fois le chargement terminé) et ensuite avoir une autre fonction (déjà sur la page avant la fonction de chargement) définie avec un timer pour vérifier cette variable (par exemple, un délai de 5 secondes ?).

si la variable n'est pas définie (après le temps prédéfini), affichage d'une erreur à l'utilisateur.

Answer 3

Je pense que vous devez supprimer le "autre", car il passera toujours par cet état "chargé", que cela fonctionne ou non, donc la branche "autre" ne fait rien d'utile.

Au lieu de cela, définissez un délai d'attente.

var scriptTimer = setTimeout(function() {
  // show error message
  // (should ideally precede with a check the content hasn't
  // been displayed, in case of race condition)
});
scriptFile.onreadystatechange = function() { // For IE
    if (this.readyState == 'complete' || this.readyState == 'loaded') {
       clearTimeout(scriptTimer);
       // now display content in tab
    }
}

Answer 4

EDIT : ma méthode était erronée - utilisez AJAX comme Kaze l'a suggéré.