CDN의 jQuery Mobile 스타일 시트에 연결 중이며 CDN이 실패 할 경우 스타일 시트의 로컬 버전으로 돌아가고 싶습니다. 스크립트의 경우 솔루션은 잘 알려져 있습니다.
<!-- 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>스타일 시트에 대해 비슷한 작업을하고 싶습니다.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />스크립트를 링크 할 때 브라우저가 스크립트를로드 할 때와 같은 방식으로 차단하는지 여부를 확신 할 수 없기 때문에 비슷한 접근 방식을 얻을 수 있는지 확실하지 않습니다 (스크립트 태그에 스타일 시트를로드 한 다음 페이지에 삽입)?
그래서 내 질문은 : CDN이 실패하면 스타일 시트가 로컬로로드되는지 어떻게 확인합니까?
답변
브라우저 간 테스트를 거치지 않았지만 이것이 작동 할 것이라고 생각합니다. 하지만 jquery를로드 한 후에야합니다. 그렇지 않으면 일반 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 rel="stylesheet" type="text/css" href="path/to/local/jquery.mobile-1.0b3.min.css" />').appendTo('head');
}
}
})
</script>답변
질문은 스타일 시트가로드되었는지 여부를 감지하는 것입니다. 한 가지 가능한 접근 방식은 다음과 같습니다.
1) CSS 파일 끝에 다음과 같은 특수 규칙을 추가합니다.
#foo { display: none !important; }2) HTML에 해당 div를 추가합니다.
<div id="foo"></div>3) 문서가 준비되면 #foo표시 여부를 확인합니다 . 스타일 시트가로드 된 경우 표시되지 않습니다.
여기 데모 -jquery-ui 부드러움 테마를로드합니다. 스타일 시트에 규칙이 추가되지 않습니다.
답변
css 및 jQuery에 대해 동일한 CDN을 사용한다고 가정하면 한 번의 테스트를 수행하고 모두 잡는 것이 어떻습니까?
<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 rel="stylesheet" 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>답변
이 기사는 부트 스트랩 CSS http://eddmann.com/posts/providing-local-js-and-css-resources-for-cdn-fallbacks/에 대한 몇 가지 솔루션을 제안합니다
.
또는 이것은 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="https://stackoverflow.com/css/font-awesome.min.css" rel="stylesheet">');
}
$span.remove();
})(jQuery);
</script>답변
에서 스타일 시트가 있는지 테스트 할 수 있습니다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사용중인 CSS 파일에 특정한 것을 테스트하십시오.
답변
이를 onerror위해 사용할 수 있습니다 .
<link rel="stylesheet" href="cdn.css" onerror="this.onerror=null;this.href='local.css';" />그만큼 this.onerror=null; 경우에 자기를 사용할 수없는 대체를 무한 루프를 방지하는 것입니다. 그러나 여러 폴백을 갖는 데 사용될 수도 있습니다.
그러나 이것은 현재 Firefox 및 Chrome에서만 작동합니다.
답변
다음은 katy lavallee의 답변에 대한 확장입니다. 변수 충돌을 방지하기 위해 모든 것을 자체 실행 함수 구문으로 래핑했습니다. 또한 스크립트를 단일 링크에 대해 비 특정 적으로 만들었습니다. IE, 이제 “data-fallback”url 속성이있는 모든 스타일 시트 링크가 자동으로 구문 분석됩니다. 이전과 같이이 스크립트에 URL을 하드 코딩 할 필요가 없습니다. 이는 <head>요소 의 끝이 아닌 끝에서 실행되어야합니다 . <body>그렇지 않으면 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);