如何实现css文件的CDN故障安全？ [英] How to implement a CDN failsafe for css files?

问题描述

对于在CDN上托管的javascript，我可以随时在其下方添加一些脚本，以检查是否已成功加载：

  ; 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）; 
  

或：

 code> document.write（< scr+ipt>...）;哪一个保证所有浏览器中的执行顺序？
 
 
 

$ b < 和 onerror events ...



 < link rel =stylesheettype =text / csshref =cdnurl / styles.css
 onload =alert（'loaded'）onerror =javascript：loadCSSBackup（）/> 
  

javascript：

 code> 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。按照上面的代码添加身体或头部应该很好。

For javascripts hosted on CDN, I can always add some scripts below it to check if it is loaded successfully:

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

I also used some hosted css files, like bootstrap. How can I reiliably check if it is loaded on the web page, and provide a fail-safe if isn't?

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

And, by the way, should I use:

document.body.appendChild(script);

or:

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

Which one guarantees execution order in all browsers?

解决方案

you could use onload and onerror events...

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

regarding 2nd question, you should avoid using document.write. Appending to body or head as in the code above should be fine.

这篇关于如何实现css文件的CDN故障安全？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！