嵌入标签加载无效PDF源时未触发onerror事件的问题求助

我之前也碰到过Chrome里<embed>标签加载PDF时onerror事件不触发的情况，这其实是Chrome内置PDF阅读器的行为导致的——当PDF源无效时，阅读器会自行显示错误界面，但不会把错误事件传递给<embed>元素本身，所以你绑定的onerror完全没机会触发。

不用预先发起HTTP请求的话，最可靠的方法是用<object>标签替代<embed>，它的错误处理逻辑在Chrome里更符合预期，能正常触发onerror事件。

替换后的示例代码： #

<object data="test.pdf" type="application/pdf" onerror="showError('pdf')">
  <!-- 可选：这里可以放加载失败时的备用提示内容 -->
  <div class="pdf-error">抱歉，无法加载该PDF文件，请检查文件路径是否正确。</div>
</object>
<img src="test.png" onerror="showError('img')" alt="">
<script>
function showError(file) {
  console.log('failed to load ' + file);
}
</script>

用这个代码测试的话，当test.pdf不存在时，showError('pdf')会被正常调用，控制台也会输出对应的日志，和图片的错误行为保持一致。

为什么<object>能生效？ #

<object>的资源加载模型和<embed>不同，它会把插件/内置阅读器的加载错误向上传递到元素本身的onerror事件，而Chrome的PDF阅读器对<embed>的错误处理是内部消化的，不会触发元素的事件回调。

如果一定要坚持用<embed>，其实也有办法，但需要依赖Chrome PDF阅读器的内部DOM结构（比如检测阅读器里的错误提示元素），这种方法非常不稳定——因为Chrome更新可能会改变阅读器的DOM结构，导致代码失效，所以不推荐。

内容的提问来源于stack exchange，提问作者philister16