2012-05-21 10 views
7

Al cargar un archivo CSS/JS desde CDN o cualquier servidor externo, es posible (incluso con baja probabilidad) perder el archivo debido a un fallo externo. En este caso, la página html se dañará debido a la falta de CSS y JS apropiados.Sentencia HTML if para cargar JS/CSS local por falla de CDN

¿Existe un enfoque práctico para cargar una versión local ante un fallo de CDN?

<link rel="stylesheet" href="http://cdn.com/style.css" type="text/css" /> 
IF (not loaded style.css){ 
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" /> 
} 

Sería más fácil de hacer esto por JS, como podemos comprobar una función JS (proporcionada en el archivo JS); luego, cargando el archivo local en caso de falla. Por ejemplo, testing, si la biblioteca jQuery está disponible.

Sin embargo, tengo curiosidad por saber si hay un método práctico para esto.

+1

http://stackoverflow.com/questions/3794128/how-to-check-if-an-external-css-file-is-loaded-using-javascript – WojtekT

Respuesta

5

Lo haría de esta manera.

Crea una clase dentro de tu hoja de estilo ui-helper-hidden y luego agrega un div como el primer elemento en tu página;

<body><div class="ui-helper-hidden"></div><!-- rest of html --></body> 

Después de haber comprobado para asegurarse de que su CDN Javascript archivo ha sido cargado, a continuación, utilizar este trozo de código nota que estoy usando jQuery

<script> 
    // CSS Fallback 
    $(function() { 
     if ($('.ui-helper-hidden:first').is(':visible') === true) { 
      $('<link rel="stylesheet" type="text/css" href="/pathtocss/nameofstylesheet.css" />').appendTo('head'); 
     } 
    }); 
</script> 

Esto comprobará para ver si el elemento lo que debería estar oculto es o no. Si no está oculto, sabrá que su archivo css no se ha cargado desde el CDN.

Puedo usar este método para jQuery and jQuery UI via a CDN

1

Para Javascript, puede escuchar los eventos onload y onerror al crear un script dinámico. Sin embargo, en esas mismas páginas, muestra lo contrario para CSS.

La única manera confiable de cargar dinámicamente CSS es hacerlo a través de AJAX. Usted podría cargar los estilos a través de etiquetas de enlace dinámico, pero sin esos eventos, no sabrá si se han cargado en absoluto. Podrías sondear los estilos, pero es IMO hackish.

Otra forma de hacerlo es hacer que el servidor lea esos archivos CDN. Si son buenos, imprime las URL para los enlaces. Pero si esos enlaces están muertos, hágalo imprimir las URL locales en su lugar. Esto sería más confiable y descargará su lógica al servidor. Esto supone que tienes acceso al servidor.

¡O mejor, use las versiones locales en primer lugar! Con un buen almacenamiento en caché, el ancho de banda no será un problema

Cuestiones relacionadas