Existe-t-il un moyen d'appliquer gracieusement une limite de temps lors du chargement d'un fichier externe lent via javascript ?

Question

J'utilise le javascript pour inclure du contenu servi par un fichier php sur un autre serveur. Cependant, cet autre service peut parfois devenir instable et prendre beaucoup de temps à se charger ou ne pas se charger du tout.

Existe-t-il un moyen en JS d'essayer d'obtenir les données externes pendant un certain nombre de secondes avant d'échouer et d'afficher un message "Veuillez réessayer" ?

<script type="text/javascript" src="htp://otherserver.com/myscript.php"></script>

Answer 1

Quelques problèmes : vous pouvez utiliser des seuils de dépassement de délai avec XMLHttpRequest (aka ajax), mais comme c'est sur une otherserver.com vous ne pouvez pas utiliser XMLHttpRequest (et supporter tous les navigateurs de classe A) en raison de la Restriction de la politique de la même origine .

Si le script introduit une sorte de nom global (par exemple un nom de variable, un nom de fonction, etc.), vous pouvez essayer setTimeout pour continuer à le vérifier :

var TIMELIMIT = 5; // seconds until timeout
var start = new Date;

setTimeout(function() {
  // check for something introduced by your external script.
  // A variable, namespace or function name here is adequate:
  var scriptIncluded = 'otherServerVariable' in window;

  if(!scriptIncluded) {
    if ((new Date - start) / 1000 >= TIMELIMIT) {
      // timed out
      alert("Please try again")
    }
    else {
      // keep waiting...
      setTimeout(arguments.callee, 100)
    }
  }
}, 100)

Le problème tel que je le vois est que vous ne pouvez pas annuler la demande pour le script. Que quelqu'un me corrige si j'ai tort, mais la suppression de l'élément <script> du DOM laissera toujours la demande du navigateur pour la ressource active. Ainsi, bien que vous puissiez détecter que le script prend plus de x secondes à charger, vous ne pouvez pas annuler la demande.

Je pense que vous n'avez pas de chance.

Answer 2

Le seul moyen auquel je pense est de créer un proxy sur un autre (compatible PHP) qui ira chercher les données pour vous, mais s'arrêtera lorsqu'une certaine limite de temps aura été atteinte (et il peut simplement renvoyer un résultat vide).

Answer 3

C'est purement, purement théorique :

<script> peuvent être insérées dynamiquement dans le DOM, et c'est à ce moment que le script sera récupéré et traité. Cette injection dynamique de balises script est la façon dont certains réalisent l'"AJAX" inter-domaines.

J'imagine que vous pourriez déclarer une variable globale var hasLoaded = false; . A la fin du script que vous essayez de charger, vous pouvez mettre cette variable à true. hadLoaded=true; . Après avoir injecté la balise script dans le DOM, vous pourriez alors lancer un setTimeout() dont la fonction de rappel vérifie si "hasLoaded" vaut true. Si ce n'est pas le cas, vous pouvez supposer que le script n'a pas encore été entièrement chargé dans le navigateur. Si c'est le cas, vous pouvez supposer qu'il s'est chargé complètement.

Encore une fois, c'est théorique, mais si vous le testez, n'oubliez pas de me le signaler, je suis très curieux.

Answer 4

Je pense que le seul moyen d'y parvenir est de prendre le contenu du fichier via ajax, puis de définir une minuterie. Si la requête se termine avant le délai, vous pouvez évaluer la réponse avec eval (ce n'est pas la meilleure solution de toute façon), sinon vous pouvez arrêter la requête ajax et écrire le message d'erreur.