<link> onerror do not work in IE

Question

I am trying to attach an event handler for the onerror event (404 error) to a <link> element.

I have something like this on my page:

<link rel="stylesheet" type="text/css" href="dead/link.css" onerror="handle404Error()" />

It works fine on Chrome and Opera but it should work on IE9+ too. I found this, but I can't find a solution myself.

Is there a way to do that without writing an extra method to load styles dynamically?

NOTE: I didn't tag this question with 'jquery', so please don't use it in your answers.

Answer 1

In IE, the onerror event does not fire on invalid link URLs, but the onload event does.

In Chrome, the opposite is true: The onload event does not fire on invalid link URLs, but the onerror event does.

So you'll need to use both events:

<link rel="stylesheet" type="text/css"
      href="dead/link.css" 
      onload="handle404Error(this)"
      onerror="handle404Error(this, true)"
/>

function handle404Error(el, failed) {
  if(failed || (el.sheet.cssRules && !el.sheet.cssRules.length)) {
    //Failed!
  }
  else {
    //Success!
  }
}

---

Example using invalid URL:

http://jsfiddle.net/et0g2xg6/

---

Example using valid URL:

http://jsfiddle.net/et0g2xg6/1

Update August 2017, thanks to @Alex:

onerror is fired by Chrome and Firefox.
onload is fired by Internet Explorer.
Edge fires neither onerror nor onload.

Answer 2

IE When the link href is for an invalid domain url, e.g. not a 404, then IE throws a Access is denied when trying to access the cssRules property.

function load (e) {
  var cssRules;
  try {
    cssRules = e.target.sheet && e.target.sheet.cssRules;
  } catch (e) {
    cssRules = { length: 0 };
  }

  if (cssRules.length) {
    console.log('load', e);    
  } else {
    console.error('load error', e);
  }
}`

Answer 3

Following solution works in Firefox, you just need to arrange function definition and function calling:

function handle404Error(el, failed) {
    if(failed || (el.sheet.cssRules && !el.sheet.cssRules.length)) {
        //Failed!
    }
    else {
        //Success!
    }
 }

 <link rel="stylesheet" type="text/css"
       href="dead/link.css" 
       onload="handle404Error(this)"
       onerror="handle404Error(this, true)"
 />