Есть ли событие ошибки в атрибуте данных тега объекта? - PullRequest
Новая
       2

Есть ли событие ошибки в атрибуте данных тега объекта?

1 голос
/ 15 марта 2019

У меня есть svg, хранящийся в корзине s3, и я встраиваю его в html-страницу, используя тег object, например: 

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

Иногда, когда браузер пытаетсязагрузить данные из URL-адреса, он получает 403. Я хотел бы заметить эту ошибку и попробовать перезагрузить / повторно выполнить рендеринг источника SVG, если это произойдет, но я не могу сказать, как заметить эту ошибку.Должен быть способ отловить ту ошибку, которую я вижу, напечатанную на моей консоли js в devtools.Я пытался зарегистрировать eventListener "onerror", но, похоже, он не срабатывает.Может быть, просто ошибка произошла до того, как мой слушатель зарегистрировался?Или, может быть, я регистрирую это не на том объекте?

Я попытался зарегистрировать слушателя на error, вот так 

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

Затем я вызвал ошибку от S3, вот так 

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

Но я нене вижу, что мой обработчик ошибок срабатывает ..

Ответы [ 2 ]

1 голос
/ 17 апреля 2019

Хорошо, так что я углубился в это, и мне кажется, что браузеры не согласны с тем, как они реализуют эту часть спецификации HTML для object, и я думаю, что это составляет ошибку в браузерах, котораяЯ не вижу, чтобы событие ошибки срабатывало постоянно.

В соответствии со спецификацией HTML5 , если атрибут данных присутствует, браузер должен выполнить несколько шагов для загрузки ресурса,и несколько точек на этом пути, где браузер должен «запустить простое событие с именем error» в случае сбоя загрузки.Например, если он не может разрешить URL, если он не может извлечь ресурс, если он получает 404 и т. Д. Однако кажется, что разные браузеры несовместимы в том, как они реализуют эту спецификацию.

Если я сохраню этот HTML-файл локально и загрузлю его в Chrome, Safari и Firefox, я получу 3 разных результата. 

<!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>

В Chrome оба события onload срабатывают, и я вижу «логотип загруженной пчелы»напечатано в консоли, после чего «загружен недостающий логотип».

В Safari я вижу только «загруженный логотип пчелы», напечатанный на консоли.

В Firefox я вижу «ошибка загрузки отсутствующего логотипа», за которым следует «загруженный логотип пчелы», напечатанный наприставка.

1 голос
/ 15 марта 2019

Нет такого имени события, как onerror. Слушайте error события вместо: 

addEventListener(
  'error',
  // ...

Вы бы использовали onerror только при назначении обработчика через установщик, например 

<element>.onerror = () => {
  // do something
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...