加载事件未触发<object>标签

Question

我的HTML中有一个object标签，其中嵌入了PDF。我想在PDF加载后做一些事情（停止模式加载器）

我已经尝试过了，但是它只能在Firefox中使用，而不能在Chrome中使用。我想要香草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>元素不再在Chrome中触发onload事件。经过一些测试后，它只会在非Chromium / Webkit浏览器（例如Firefox和Edge）中触发onload事件处理程序。

快速浏览一下我所做的一些基本浏览器测试：

• 触发load事件：Firefox和Edge
• 不触发load事件：Chrome，Opera，Safari，IE11

一种解决方法是通过<iframe>属性将PDF加载到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);
});