如何为css文件实现CDN故障保护?

时间:2014-04-05 09:34:09

标签: javascript html css web cdn

对于CDN上托管的javascripts,我总是可以在其下面添加一些脚本来检查它是否已成功加载:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
if (!window.jQuery) {
var script = document.createElement('script');
script.src = "/js/jquery.min.js";
document.body.appendChild(script);
}
</script>

我还使用了一些托管的css文件,比如bootstrap。如何重新检查网页上是否已加载,如果不是,则提供故障安全?

----- EDIT --------

顺便说一句,我应该使用:

document.body.appendChild(script);

或:

document.write("<scr"+"ipt>"...);

哪一个保证所有浏览器的执行顺序?

1 个答案:

答案 0 :(得分:2)

您可以使用onloadonerror个活动......

<link rel="stylesheet" type="text/css" href="cdnurl/styles.css" 
    onload="alert('loaded')" onerror="javascript:loadCSSBackup()" />

的javascript:

function loadCSSBackup(){
    var css = document.createElement("link")
    css.setAttribute("rel", "stylesheet");
    css.setAttribute("type", "text/css");
    css.setAttribute("href", 'backup/styles.css');
    document.getElementsByTagName("head")[0].appendChild(css);
}

关于第二个问题,你应该避免使用document.write。按照上面的代码附加到正文或头部应该没问题。