onerror在IE中不起作用

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

我试图将onerror事件(404错误)的事件处理程序附加到元素。

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.

它适用于Chrome和Opera,但它也适用于IE9 +。我找到了这个,但我自己找不到解决方案。

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.

注意:我没有用'jquery'标记这个问题,所以请不要在你的答案中使用它。

3 个解决方案

#1

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

在IE中,onerror事件不会触发无效链接URL,但onload事件会触发。

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

在Chrome中,情况恰恰相反:onload事件不会在无效的链接URL上触发,但是onerror事件会触发。

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:

2017年8月更新,感谢@Alex:

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

Chrome和Firefox解雇了onerror。 Internet Explorer触发了onload。边缘既不会发生恐怖也不会发生负载。

#2

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

以下解决方案适用于Firefox,您只需要安排函数定义和函数调用:

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)"
 />

#3

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.

IE当链接href用于无效域url时,例如不是404,然后IE在尝试访问cssRules属性时抛出Access被拒绝。

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);
  }
}`

#1