觸發 Javascript 事件，如果<object>加載失敗

Question

即使<object>無法加載，我也想觸發。

我知道我可以這樣做：

<object>Some Error Happened</object>

但我也需要用 Javascript 檢測它，然后在對象失敗時觸發一些邏輯。

這似乎是一件極其不可能的事情？

我試過：

document.querySelector('object').addEventListener('error', () => { alert('Something went wrong'); })

但這也行不通。

Answer 1

錯誤事件在 Window 對象上觸發：

window.addEventListener('error', (event) => {
    console.log(event)
});

https://developer.mozilla.org/en-US/docs/Web/API/Window/error_event

Answer 2

這將是一個 Chrome 錯誤。

根據規范，如果 URL 解析失敗或資源加載失敗， error事件應該在<object>元素上觸發（在 Firefox 中也是如此）。
盡管存在某種灰色區域，如果請求沒有以網絡錯誤結束，並且資源沒有關聯的 Content-Type 元數據，那么它只會默默地失敗......
這似乎違反直覺，可能需要規范錯誤。

無論如何，我認為 Chrome 無法正常識別網絡錯誤，因此解決方案可能是打開一個chrome 問題，以便他們修復它。 _{我在BUG 853140上加了一條評論，讓我們看看它是怎么回事}

解決方法是使用<iframe>代替。 <object>無論如何可能很快就會被棄用。

請注意，將type屬性設置為不受支持的類型或僅將其包含在響應的 MIME 類型中，Chrome 將觸發該事件，但它仍然面臨一個新問題，即同步觸發此事件，甚至在我們有時間附加任何處理程序之前。 所以我們必須通過再次設置data屬性來強制它再次觸發：

 document.querySelectorAll('object') .forEach( el => { el.onerror = e => console.log( "error", el ); el.data = el.data; // force fire again } );

 <object data="/foo"></object> <!-- doesn't fire --> <object data="/foo" type="image/svg+xml"></object> <!-- doesn't fire --> <object data="/foo" type="foo/bar"></object> <!-- does fire --> <object data="data:foo,"></object> <!-- does fire -->