J'ai un svg stocké dans un bucket s3 et je l'intègre sur une page html à l'aide de la balise object, comme ceci :

<object type="image/svg+xml" data="url-to-svg-source" id="graph"></object>

Parfois, lorsque le navigateur essaie de charger les données à partir de l'URL, il obtient un 403. J'aimerais remarquer cette erreur et essayer de recharger / re-rendu la source svg si cela se produit, mais je ne sais pas comment le remarquer cette erreur. Il doit y avoir un moyen d'attraper cette erreur que je vois imprimée dans ma console js dans devtools. J'ai essayé d'enregistrer un eventListener "onerror", mais il ne semble pas se déclencher. Peut-être est-ce juste que l'erreur se produit avant que mon auditeur ne soit enregistré ? Ou peut-être que je l'enregistre sur le mauvais objet ?

J'ai essayé d'enregistrer un écouteur sur error, comme ça

document
  .getElementById("graph")
  .addEventListener(
    "error", 
    function(){ console.log("on error") })

Ensuite, j'ai déclenché une erreur de S3 comme ça

$("#graph").attr("data", badurl)

Mais je ne vois pas mon écouteur d'erreur se déclencher.

1
Bee 15 mars 2019 à 08:51

2 réponses

Meilleure réponse

Ok, donc j'ai creusé cela et il me semble que les navigateurs sont incohérents sur la façon dont ils implémentent cette partie de la spécification HTML pour object et je pense que cela équivaut à un bogue dans les navigateurs que je Je ne vois pas l'événement d'erreur déclenché de manière cohérente.

Selon la spécification HTML5, si l'attribut data est présent, il y a plusieurs étapes que le navigateur est censé exécuter pour charger la ressource, et plusieurs points le long du chemin où le navigateur est censé "déclencher un événement simple nommé error" si le chargement échoue. Par exemple, s'il ne peut pas résoudre l'URL, s'il ne peut pas récupérer la ressource, s'il obtient un 404, etc. Cependant, il semble que différents navigateurs soient incohérents dans la façon dont ils implémentent cette spécification.

Si j'enregistre ce code HTML localement et le charge dans Chrome, Safari et Firefox, je vois 3 résultats différents.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>test object svg reload</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  </head>
  <body>
    <div class="panel">
      <div class="main">
        <div>This object has valid data and loads a bee logo</div>
        <object type="image/svg+xml"
                data="https://www.beeminder.com/legacy_images/infinibee.svg"
                id="beelogo"
                onload="console.log('loaded bee logo')"
                onerror="console.log('error loading bee logo')">
          <h2 id="fallback">This is the fallback</h2>
        </object>
      </div>
      <div class="main">
        <div>This object will get a 404 when trying to load its data</div>
        <object type="image/svg+xml"
                data= "https://beeminder-dev.s3-us-west-2.amazonaws.com/not-a-valid-file-name.svg"
                id="missinglogo"
                onload="console.log('loaded missing logo')"
                onerror="console.log('error loading missing logo')">
          <h2 id="fallback">This is the fallback</h2>
        </object>
      </div>
    </div>
  </body>
</html>

Dans Chrome, les deux événements onload sont déclenchés et je vois "loaded bee logo" imprimé dans la console, suivi de "loaded missing logo".

Dans Safari, je ne vois que "loaded bee logo" imprimé sur la console.

Dans Firefox, je vois « erreur de chargement du logo manquant », suivi de « logo de l'abeille chargée » imprimé dans la console.

2
Bee 17 avril 2019 à 04:19

Il n'existe pas de nom d'événement tel que onerror. Écoutez plutôt les événements error :

addEventListener(
  'error',
  // ...

Vous utiliseriez onerror uniquement lors de l'attribution d'un gestionnaire via le setter, par exemple

<element>.onerror = () => {
  // do something
};
1
Snow 15 mars 2019 à 05:52