<link> 错误在IE中不起作用

Question

我正在尝试将onerror事件（404错误）的事件处理程序附加到<link>元素。

我的页面上有类似的东西：

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

它在Chrome和Opera上正常工作，但也应该在IE9 上使用。我找到了这个，但我自己找不到解决方案。

有没有办法在不编写动态加载样式的额外方法的情况下做到这一点？

注意：我没有用" jQuery"标记这个问题，所以请不要在您的答案中使用它。

Answer 1

在IE中，onerror事件不会在无效的link URL上发射，但onload事件确实。

在Chrome中，相反的是：onload事件不会在无效的link URL上发射，但onerror事件确实。

因此，您需要使用两个事件：

<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!
  }
}

---

使用无效URL的示例：

http://jsfiddle.net/et0g2xg6/

---

使用有效URL的示例：

http://jsfiddle.net/et0g2xg6/1

更新2017年8月，感谢@Alex：

onerror由Chrome和Firefox发射。
onload由Internet Explorer发射。
边缘既没有触发 onerror也不发射onload。

Answer 2

以下解决方案在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)"
 />

Answer 3

ie 当链接HREF用于无效域URL时，例如。不是404，然后在尝试访问cssRules属性时抛出Access is denied。

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