Comment les secours locaux de la feuille de style (pas de script) si CA échoue

Je suis un lien vers jQuery Mobile de la feuille de style sur un CDN et voudrais revenir à ma version locale de la feuille de style si CA tombe en panne. Pour les scripts, la solution est bien connue:

<!-- Load jQuery and jQuery mobile with fall back to local server -->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript">
  if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='jquery-1.6.3.min.js'%3E"));
  }
</script>

Je voudrais faire quelque chose de similaire pour une feuille de style:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />

Je ne suis pas sûr si une approche similaire peut être réalisé parce que je ne suis pas sûr que le navigateur bloque de la même façon lors de la liaison d'un script comme il le fait lors du chargement d'un script (peut-être qu'il est possible de charger une feuille de style dans une balise script et puis à l'injecter dans la page) ?

Donc ma question est: Comment dois-je faire une feuille de style est chargé localement si CA tombe en panne ?

  • Je voudrais savoir si c'est possible... Si j'ai vraiment inquiétait à propos de la CAN de l'arrêt, je voudrais juste utiliser de l'hébergement local.
  • Kendall, je pense que le droit énoncé est que son site sera plus que probablement à descendre que d'un CDN
  • Meilleure façon: stackoverflow.com/questions/26192897/...
InformationsquelleAutor ssn | 2011-09-12
  1. 60

    Pas de croix-navigateur testé, mais je pense que cela va fonctionner. Devra être après vous charger jquery, sinon vous aurez à le réécrire dans la plaine du Javascript.

    <script type="text/javascript">
$.each(document.styleSheets, function(i,sheet){
  if(sheet.href=='http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css') {
    var rules = sheet.rules ? sheet.rules : sheet.cssRules;
    if (rules.length == 0) {
      $('<link  type="text/css" href="path/to/local/jquery.mobile-1.0b3.min.css" />').appendTo('head');
    }
 }
})
</script>
    • Un grand merci à vous! Je vais essayer cette
    • une bonne solution à un problème, il n'a pas d'adresse si le CA est trop lent à charger... peut-être une sorte de délai d'attente?
    • Pour code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css, j'obtiens des règles = null, même si elle a été correctement chargé. Je suis en utilisant google Chrome 26 et je pense que c'est parce que le script est de la croix de domaine?
    • La solution ne fonctionne pas vraiment pour tous les Cdn/feuilles de style, par exemple CSSStyleSheet js objets qui viennent de bootstrapcdn.com tous les vides rules et cssRules champs dans mon navigateur (Chrome 31). SED: en fait, elle pourrait être une crossdomain problème, le fichier css dans la réponse aussi ne fonctionne pas pour moi.
    • Cela fonctionne avec le protocole de moins de syntaxe? I. e. href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css"
    • C'est aussi bon soloution à l'aide de onerror événement. stackoverflow.com/questions/30546795/...
    • Cela fonctionne pour les CSS chargé à partir d'un autre domaine? Non, vous ne pouvez pas vous énumérer .rules/.cssRules pour des feuilles de style externes. jsfiddle.net/E6yYN/13

    InformationsquelleAutor katy lavallee
  2. 28

    En supposant que vous utilisez le même CDN pour les css et jQuery, pourquoi ne pas simplement faire un test et attraper tous les??

    <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
    if (typeof jQuery == 'undefined') {
        document.write(unescape('%3Clink  type="text/css" href="../../Content/jquery-ui-1.8.16.custom.css" /%3E'));
        document.write(unescape('%3Cscript type="text/javascript" src="/jQuery/jquery-1.6.4.min.js" %3E%3C/script%3E'));
        document.write(unescape('%3Cscript type="text/javascript" src="/jQuery/jquery-ui-1.8.16.custom.min.js" %3E%3C/script%3E'));
    }
</script>
    • Puis-je demander à ce que le problème lié à l'utilisation sans échappement des chaînes d'abord, par exemple,document.write("<script type='text/javascript' src='path/to/file.js'>")?
    • L'analyseur ne peut pas différencier entre <script> à l'intérieur d'un JS chaîne et on a retrouvé à l'extérieur. C'est souvent pourquoi vous voyez aussi <\/script> lors de l'écriture des balises pour le CDN de base.
    • -1 why not just do one test and catch it all? -- Parce qu'il y a un million de raisons, que l'on peut échouer, et les autres à réussir.
    InformationsquelleAutor Mike Wills
  3. 27

    Je suppose que la question est de détecter si une feuille de style est chargé ou pas. Une approche possible est la suivante:

    1) Ajouter une règle spéciale à la fin de votre fichier CSS, comme:

    #foo { display: none !important; }

    2) Ajouter le correspondant div en HTML:

    <div id="foo"></div>

    3) Sur le document prêt, vérifiez si #foo est visible ou non. Si la feuille de style a été chargé, il ne sera pas visible.

    Démo ici -- charges de jquery-ui douceur thème; pas de règle est ajoutée à la feuille de style.

    • +1 pour une solution intelligente. Seul problème, on ne peut normalement pas aller et ajouter une ligne à la fin d'une feuille de style qui est hébergé sur un CDN
    • +1 pour cette superbe chose
    • Malheureusement, on ne peut pas taper dans nos propres classes de CDN fichiers. Peut-être qu'on peut essayer d'utiliser celui qui existe déjà.
    • J'aime BEAUCOUP celle-ci, merci. Il est très puissant, vraiment. Évidemment, je ne peut pas manipuler le CDN de la feuille de style, mais je sais ce que les classes sont utilisés, donc j'ai modifié le code pour afficher vérifier si elles sont visibles - très intelligent en effet 🙂
    • NB: vous n'avez pas vraiment ont pour ajouter une nouvelle règle à la CSS externe. Il suffit d'utiliser une règle existante dont le comportement est connu. Dans ma démonstration, j'ai utiliser l'interface utilisateur-helper-classe caché qui est censée cacher l'élément, je vérifie si l'élément est caché au chargement de la page.
    InformationsquelleAutor Salman A
  4. 7

    cet article propose quelques solutions pour le bootstrap css
    http://eddmann.com/posts/providing-local-js-and-css-resources-for-cdn-fallbacks/

    sinon cela fonctionne pour fontawesome

    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script>
    (function($){
        var $span = $('<span class="fa" style="display:none"></span>').appendTo('body');
        if ($span.css('fontFamily') !== 'FontAwesome' ) {
            //Fallback Link
            $('head').append('<link href="/css/font-awesome.min.css" >');
        }
        $span.remove();
    })(jQuery);
</script>
    • Pour ceux qui cherchent à l'utiliser avec la Police Impressionnant 5, vous aurez envie de changer "FontAwesome' (dans le cas de la clause) de 'Police Impressionnant 5 Libre" (si vous utilisez des polices de caractères gratuites). Sinon, il devrait fonctionner correctement.
    InformationsquelleAutor dc2009
  5. 3

    Vous pourrait être en mesure de tester l'existence de la feuille de style dans document.styleSheets.

    var rules = [];
if (document.styleSheets[1].cssRules)
    rules = document.styleSheets[i].cssRules
else if (document.styleSheets[i].rules)
    rule= document.styleSheets[i].rules

    Test pour quelque chose de spécifique dans le fichier CSS que vous utilisez.

    InformationsquelleAutor Stefan Kendall
  6. 3

    Voici une extension pour katy lavallee réponse. J'ai emballé le tout dans l'auto-exécution de la syntaxe de la fonction pour empêcher la variable collisions. J'ai aussi fait le script non-spécifiques à un seul lien. I. E., maintenant, toute feuille de style en lien avec les données "de secours" attribut url sera automatiquement analysée. Vous n'avez pas à coder l'url dans ce script comme avant. Notez que cela devrait être lancé à la fin de la <head> élément plutôt qu'à la fin de la <body> élément, sinon il peut causer de la FOUC.

    http://jsfiddle.net/skibulk/jnfgyrLt/

    <link rel="stylesheet" type="text/css" href="broken-link.css" data-fallback="broken-link2.css">

    .

    (function($){
    var links = {};

    $( "link[data-fallback]" ).each( function( index, link ) {
        links[link.href] = link;
    });

    $.each( document.styleSheets, function(index, sheet) {
        if(links[sheet.href]) {
            var rules = sheet.rules ? sheet.rules : sheet.cssRules;
            if (rules.length == 0) {
                link = $(links[sheet.href]);
                link.attr( 'href', link.attr("data-fallback") );
            }
        }
    });
})(jQuery);
    • J'ai comme l'encapsulation, mais en général, vous ne pouvez pas inspecter la feuille.règles pour un cross-domain de la feuille de style. Vous pouvez toujours utiliser cette idée générale, mais besoin de faire un chèque différent.
    • avec document.styleSheets[i].ownerNode.dataset vous pouvez accéder à <link data-* /> attributs
    InformationsquelleAutor skibulk
  7. 2

    Voulez-vous vraiment aller dans cette javascript route pour charger les CSS dans le cas d'un CDN échoue?

    Je n'ai pas pensé à toutes les conséquences de performance à travers, mais vous allez perdre le contrôle lorsque le CSS est chargé et en général pour les performances de chargement des pages, CSS est la première chose que vous voulez télécharger après le HTML.

    Pourquoi ne pas gérer cela au niveau des infrastructures - la carte de votre propre nom de domaine à la CAN, il donne une courte durée de vie, de surveiller les fichiers sur le CDN (par ex. à l'aide de Watchmouse ou autre chose), si CA échoue, modifier les DNS pour la sauvegarde du site.

    D'autres options qui pourraient aider à "cache forever" sur le contenu statique, mais il n'ya aucune garantie que le navigateur va les garder, bien sûr, ou à l'aide de l'app-cache.

    En réalité, comme quelqu'un l'a dit au dessus, si votre CA est fiable obtenir un nouveau

    Andy

    • CA peut être fiable, mais pas l'environnement de développement de connexion internet 😉
    InformationsquelleAutor Andy Davies
  8. 2

    On pourrait utiliser onerror pour que:

    <link rel="stylesheet" href="cdn.css" onerror="this.onerror=null;this.href='local.css';" />

    La this.onerror=null; est d'éviter la formation d'une boucle infinie dans le cas où le repli de soi n'est pas disponible. Mais il pourrait également être utilisé pour plusieurs issues.

    Cependant, actuellement, cela ne fonctionne dans Firefox et Chrome.

    InformationsquelleAutor Jan
  9. 1

    Regardez ces fonctions:

    $.ajax({
    url:'CSS URL HERE',
    type:'HEAD',
    error: function()
    {
        AddLocalCss();
    },
    success: function()
    {
        //file exists
    }
});

    Et voici la vanille version JavaScript: 

    function UrlExists(url)
{
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}
if (!UrlExists('CSS URL HERE') {
AddLocalCss();
}

    Maintenant la fonction réelle:

    function AddLocalCss(){
document.write('<link  type="text/css" href=" LOCAL CSS URL HERE">')
}

    Assurez-vous juste AddLocalCss est appelé dans la tête.

    Vous pouvez également envisager d'utiliser l'une des manières suivantes expliqué dans cette réponse:

    De la charge à l'aide d'AJAX

    $.get(myStylesLocation, function(css)
{
   $('<style type="text/css"></style>')
      .html(css)
      .appendTo("head");
});

    Charge à l'aide de créé dynamiquement 

    $('<link  type="text/css" href="'+myStylesLocation+'" >')
   .appendTo("head");
Load using dynamically-created <style>

$('<style type="text/css"></style>')
    .html('@import url("' + myStylesLocation + '")')
    .appendTo("head");

    ou

    $('<style type="text/css">@import url("' + myStylesLocation + '")</style>')
    .appendTo("head");
    • serait-ce de télécharger le fichier css?
    • Oui, au moins dans le navigateur moderne, je ne suis pas sûr que IE6.
    • Est-il un moyen de le vérifier au lieu de télécharger l'ensemble de la chose?
    • La seule raison possible de faire de la Fpo demande est d'éviter les excès de trafic réseau. Cela crée un excès de trafic réseau.
    • Oui il suffit de faire l'erreur 404 chose.
    • Kendall: non, ce n'est même pas la raison possible): il pourra pas faire assurez-vous que les fichiers chargés.
    • Si c'était le seul souci, vous serait tout simplement pas utiliser un CDN. Essais juste de l'en-tête est mieux, mais je suis sûr que la plupart des réseaux de diffusion de contenu et de votre navigateur ne sont pas autoriser de XSS.
    • Assurez-vous de ne pas utiliser un CDN est le moyen le plus sûr, mais je donne la réponse en supposant que l'OP a une certaine bande passante/problème de vitesse.
    • Kendall: je me demandais si vous en bas-voté parce que la réponse n'est pas la meilleure pour votre hypothèse de l'OP situation, mais pas la question.
    • J'ai expliqué pourquoi ce ne sera probablement pas travailler. Aller essayer et créer un jsfiddle de tester ce. Aussi, cela ne tient pas compte lors de la CAN retourne 503s, ou quand il revient 200s avec un contenu vide. Il y a beaucoup de "potentiel de bord de cas," cela ne couvre pas, et c'est presque certainement mieux gérées au CDN niveau de toute façon.
    • l'OP a demandé de vérifier pour le CSS si ses chargés ou non, et de décider ensuite de le télécharger à partir de son serveur et il fonctionne réellement.

    InformationsquelleAutor
  10. -1

    Je serais probablement utiliser quelque chose comme yepnope.js 

    yepnope([{
  load: 'http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
  complete: function () {
    if (!window.jQuery) {
      yepnope('local/jquery.min.js');
    }
  }
}]);

    Prises de le fichier readme.

    • Il demande comment faire pour une feuille de style, pas pour jquery...
    • Ce travail avec les feuilles de style ou seulement avec .fichiers js?
    • yepnope fonctionne également pour les CSS.
    • cela ne signifie pas que vous pouvez coller quelques pas pertinent de code qui, en aucune façon, les réponses à la question posée.
    InformationsquelleAutor Ben Schwarz
  11. -8
    //(load your cdn lib here first)

<script>window.jQuery || document.write("<script src='//me.com/path/jquery-1.x.min.js'>\x3C/script>")</script>
    InformationsquelleAutor crazy4groovy