Estou vinculando a folha de estilo do jQuery Mobile em um CDN e gostaria de voltar para minha versão local da folha de estilo se o CDN falhar. Para scripts, a solução é bem conhecida:
<!-- 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>
Eu gostaria de fazer algo semelhante para uma folha de estilo:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
Não tenho certeza se uma abordagem semelhante pode ser alcançada porque não tenho certeza se o navegador bloqueia da mesma maneira ao vincular um script e ao carregar um script (talvez seja possível carregar uma folha de estilo em uma tag de script e então injete-o na página)?
Portanto, minha pergunta é: Como posso garantir que uma folha de estilo seja carregada localmente se um CDN falhar?
Respostas:
Não foi testado em cross-browser, mas acho que funcionará. Terá que ser depois de carregar o jquery, ou você terá que reescrevê-lo em Javascript simples.
fonte
CSSStyleSheet
objetos js que vêm de bootstrapcdn.com têm todos os camposrules
e vazioscssRules
em meu navegador (Chrome 31). UPD : na verdade, pode ser um problema de crossdomain, o arquivo css na resposta também não funciona para mim.onerror
evento. stackoverflow.com/questions/30546795/….rules
/.cssRules
para folhas de estilo externas. jsfiddle.net/E6yYN/13Acho que a questão é detectar se uma folha de estilo está carregada ou não. Uma abordagem possível é a seguinte:
1) Adicione uma regra especial ao final do seu arquivo CSS, como:
2) Adicione o div correspondente em seu HTML:
3) No documento pronto, verifique se
#foo
está visível ou não. Se a folha de estilo foi carregada, ela não ficará visível.Demo here - carrega o tema de suavidade jquery-ui; nenhuma regra é adicionada à folha de estilo.
fonte
Supondo que você esteja usando o mesmo CDN para css e jQuery, por que não fazer apenas um teste e pegar tudo ??
fonte
document.write("<script type='text/javascript' src='path/to/file.js'>")
?<script>
dentro de uma string JS e uma encontrada fora. É geralmente por isso que você também vê<\/script>
ao gravar tags para substitutos de CDN.why not just do one test and catch it all?
- Porque há um milhão de razões para que uma falhe e as outras tenham sucesso.este artigo sugere algumas soluções para o bootstrap css http://eddmann.com/posts/providing-local-js-and-css-resources-for-cdn-fallbacks/
alternativamente, isso funciona para fontawesome
fonte
Você pode testar a existência da folha de estilo em
document.styleSheets
.Teste algo específico para o arquivo CSS que você está usando.
fonte
Pode-se usar
onerror
para isso:O
this.onerror=null;
objetivo é evitar loops infinitos caso o próprio fallback não esteja disponível. Mas também pode ser usado para ter vários substitutos.No entanto, isso atualmente funciona apenas no Firefox e Chrome.
fonte
Aqui está uma extensão da resposta de Katy Lavallee. Envolvi tudo em sintaxe de função autoexecutável para evitar colisões de variáveis. Também tornei o script não específico para um único link. Ou seja, agora qualquer link de folha de estilo com um atributo de url "fallback de dados" será automaticamente analisado. Você não precisa codificar os urls neste script como antes. Observe que isso deve ser executado no final do
<head>
elemento e não no final do<body>
elemento, caso contrário, pode causar FOUC .http://jsfiddle.net/skibulk/jnfgyrLt/
.
fonte
document.styleSheets[i].ownerNode.dataset
você pode acessar<link data-* />
atributosVocê realmente deseja seguir esta rota de javascript para carregar CSS no caso de um CDN falhar?
Não pensei em todas as implicações de desempenho, mas você vai perder o controle de quando o CSS é carregado e, em geral, para o desempenho de carregamento da página, CSS é a primeira coisa que você deseja baixar após o HTML.
Por que não lidar com isso no nível de infraestrutura - mapeie seu próprio nome de domínio para o CDN, dê a ele um TTL curto, monitore os arquivos no CDN (por exemplo, usando o Watchmouse ou outro), se o CDN falhar, mude o DNS para o site de backup.
Outras opções que podem ajudar são "armazenar em cache para sempre" em conteúdo estático, mas não há garantia de que o navegador os manterá no curso ou usando o cache do aplicativo.
Na realidade, como alguém disse no topo, se o seu CDN não for confiável, compre um novo
Andy
fonte
Observe estas funções:
E aqui está a versão vanilla do JavaScript:
Agora, a função real:
Apenas certifique-se de que AddLocalCss seja chamado na cabeça.
Você também pode usar uma das seguintes maneiras explicadas nesta resposta :
Carregar usando AJAX
Carregar usando criado dinamicamente
ou
fonte
Provavelmente usaria algo como yepnope.js
Retirado do readme.
fonte
fonte