How to detect IE 10+ for an onerror event

Question

I have a little problem with scaling SVG on IE10+. I have this code:

<img src="img/logo.svg" alt="" onerror="this.src='img/logo.png'; this.onerror=null;">

How can I detect IE10+ for the onerror event?

Greetings

Answer 1

For IE10+, use the Microsoft specific window.msMatchMedia feature detection:

 function handler(e) { if (!!window.msMatchMedia) { e.target.src = "http://stackoverflow.com/favicon.ico"; } } document.querySelector("#ie10_plus").addEventListener("error", handler, false) 

 <img src="" id="ie10_plus" alt=""> 

In general, use an invalid src value to trigger an error. For example:

 document.querySelector('#foo').src="//foo"; 

 <img src="" width="16" height="16" onclick="javascript:this.src='http://www.stackexchange.com/favicon.ico'"/>Click Me <img src="favicon.ico" onerror="javascript:this.src='http://stackoverflow.com/favicon.ico'" width="16" height="16"/>Despicable Me <img id="foo" src="" width="16" height="16" onerror="javascript:this.src='http://stackoverflow.com/favicon.ico'"/>Despicable Me 2 

References

• Media query listeners (Windows)

• Make your HTML/JavaScript app accessible – Windows 8 app developer blog