При загрузке событие не запускается для тега <object>

Question

У меня есть тег object в моем HTML, который встраивает PDF.Я хочу сделать что-то после загрузки PDF (остановить модальный загрузчик)

Я пробовал это, но это работает только в Firefox и не работает в Chrome.Мне бы хотелось любое возможное решение в vanilla JS или jQuery.

<object id="pdf-preview" type="application/pdf" data="/admin/get_pdf"></object>

$("#pdf-preview")[0].addEventListener('load', function (e) {
  alert("Loaded")
  stopLoader();
});

Событие вообще не вызывается в Chrome!

Answer 1

Как я уже упоминал в своем комментарии, элемент <object> больше не запускает событие onload в Chrome.После некоторого тестирования он запускает обработчик событий onload только в браузерах, отличных от Chromium / Webkit (например, Firefox и Edge).

Краткое изложение некоторых базовых тестов браузера, которые я сделал:

• Запускает событие load: Firefox и Edge
• Не запускает событие load: Chrome, Opera, Safari, IE11

Обходной путь будетзагрузите файл PDF в элементе <iframe> с помощью атрибута src:

<iframe id="pdf-preview" src="/admin/get_pdf"></iframe>

И тогда вы можете легко связать прослушиватель событий load следующим образом:

document.getElementById('pdf-preview').addEventListener('load', function(e) {
    console.log('Loaded', e);
});

Есливы предпочитаете использовать jQuery, вы также можете сделать это:

$('#pdf-preview').on('load', function(e) {
    console.log('Loaded', e);
});