使用 onload 为 Internet Explorer 创建 CSS 回退答案

【问题标题】：Using onload to create CSS fallback for Internet Explorer使用 onload 为 Internet Explorer 创建 CSS 回退
【发布时间】：2016-06-07 02:49:45
【问题描述】：

我正在尝试使用 Internet Explorer 中的 onload 事件为 CDNS 创建 CSS 回退，但我在使其正常工作时遇到了问题。 onerror 版本适用于 Chrome 和 Firefox。我正在尝试将变量 linkSuccess 设置为 false，并在样式表加载时使用 onload 事件将 linkSuccess 更改为 true。如果 onload 事件没有触发，linkSuccess 应该保持 false 运行回退。但我无法让它工作。

感谢您提供的任何帮助！谢谢！

<!-- CDNs for Bootstrap and Font-Awesome -->
<link id="bootstrapFallback" onError="stylesheetFallback(this.id)" onLoad="ieFallbackCheck(this.id)" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1./css/bootstrap.min.css">
<link id="fontAwesomeFallback" onError="stylesheetFallback(this.id)" onLoad="ieFallbackCheck(this.id)" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

fallback.js 代码：

var cssFallbacks = {
  "bootstrapFallback" : "/bootstrap.min.css",
  "fontAwesomeFallback" : "/font-awesome.min.css"
};

var linkSuccess = false;

function stylesheetFallback(fallbackKey) {
  document.getElementById(fallbackKey).href = cssFallbacks[fallbackKey];
}

function ieFallbackCheck(fallbackKey) {
    var linkSuccess = true;
}

if (linkSuccess = false) {
    document.getElementById("bootstrapFallback").href = cssFallbacks[bootstrapFallback];
    console.log("Initiate Fallback");
}

【问题讨论】：

“无法正常工作”...这是什么意思？请查看How to Ask。你需要edit你的答案，提供更多关于你期望发生的事情、实际发生的事情以及你在控制台中遇到的任何错误的信息。

标签： javascript css twitter-bootstrap cdn fallback

【解决方案1】：

你最好使用conditional comments 来作为 CSS 后备：

<link href="original-styles.css" type="text/css" rel="stylesheet"/>
<!--[if lte IE 8]>
<link href="ie6-fix.css" type="text/css" rel="stylesheet"/>
<![endif]-->

评论中的链接只会被 IE 8 和下面解释。

【讨论】：