programing

CDN이 실패한 경우 로컬 스타일시트(스크립트가 아닌)로 폴백하는 방법

codeshow 2023. 9. 24. 13:11
반응형

CDN이 실패한 경우 로컬 스타일시트(스크립트가 아닌)로 폴백하는 방법

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에 장애가 발생한 경우 스타일시트를 로컬로 로드하려면 어떻게 해야 합니까?

다음과 같은 용도로 사용할 수 있습니다.

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

그this.onerror=null;폴백 자체를 사용할 수 없을 경우 끝없는 루프를 피하기 위한 것입니다.하지만 여러 개의 폴백(fallback)을 가질 때도 사용할 수 있습니다.

그러나 이는 현재 Firefox와 Chrome에서만 작동합니다.

업데이트: 한편, 이는 모든 일반 브라우저에서 지원되는 것으로 보입니다.

크로스브라우저 테스트는 안 했는데 잘 될 것 같아요.jquery를 로드한 후여야 합니다. 그렇지 않으면 일반 자바스크립트로 다시 작성해야 합니다.

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

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>

문제는 스타일시트의 로딩 여부를 감지하는 것입니다.한 가지 가능한 접근 방식은 다음과 같습니다.

1) CSS 파일 끝에 다음과 같은 특별한 규칙을 추가합니다.

#foo { display: none !important; }

2) HTML에 해당 div를 추가합니다.

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

3) 문서가 준비되면 다음을 확인합니다.#foo보이든 안 보이든 간에.스타일시트가 로드된 경우에는 볼 수 없습니다.

데모 - jquery-ui 평활도 테마를 로드합니다. 스타일시트에 규칙이 추가되지 않습니다.

이 기사는 부트스트랩 CSS http://eddmann.com/posts/providing-local-js-and-css-resources-for-cdn-fallbacks/ 에 대한 몇 가지 해결책을 제안합니다.

대신에 이것은 폰타썸에 효과가 있습니다.

<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" 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 파일에 특정한 것이 있는지 테스트합니다.

여기 케이티 라발리의 답변에 대한 확장이 있습니다.가변적인 충돌을 방지하기 위해 모든 것을 자동 실행 기능 구문으로 포장했습니다.또한 스크립트를 단일 링크에 비특이적으로 만들었습니다.즉, 이제 "데이터 폴백" URL 속성을 가진 모든 스타일시트 링크가 자동으로 구문 분석됩니다.예전처럼 URL을 이 스크립트에 하드코딩할 필요가 없습니다.이 작업은 작업이 끝날 때 실행해야 합니다.<head><body>요소, 그렇지 않으면 FOOC를 유발할 수 있습니다.

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

CDN에 장애가 발생할 경우 이 자바스크립트 경로를 통해 CSS를 로드하시겠습니까?

저는 모든 성능 영향을 고려하지 않았지만 CSS가 로드될 때 제어력을 잃게 될 것이고 일반적으로 페이지 로드 성능의 경우 HTML 다음으로 가장 먼저 다운로드 받고 싶은 것이 CSS입니다.

자신의 도메인 이름을 CDN에 매핑하고, 짧은 TTL을 제공하고, CDN의 파일을 모니터링(예: Watchmouse 등을 사용)하는 등 인프라스트럭처 수준에서 이 문제를 처리하지 않는 이유는 무엇입니까? CDN이 실패하면 DNS를 백업 사이트로 변경합니다.

정적 컨텐츠에 대한 "영원한 캐시"를 사용하는 것이 도움이 될 수 있는 다른 옵션이지만 브라우저가 이를 물론 유지하거나 앱 캐시를 사용한다는 보장은 없습니다.

맨 위에서 말한 것처럼 CDN을 신뢰할 수 없다면 새 CDN을 구입합니다.

앤디

다음 기능을 살펴봅니다.

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

다음은 바닐라 자바스크립트 버전입니다.

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

이제 실제 기능:

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

AddLocalCss가 머리에 호출되었는지 확인합니다.

이 답변에서 설명하는 다음 방법 중 하나를 사용하는 것도 고려해 볼 수 있습니다.

AJAX를 사용하여 로드

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

동적으로 생성된 로드

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

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

아니면

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

아마 예프노페.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');
    }
  }
}]);

읽어줘요.

//(load your cdn lib here first)

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

언급URL : https://stackoverflow.com/questions/7383163/how-to-fallback-to-local-stylesheet-not-script-if-cdn-fails

반응형

'programing' 카테고리의 다른 글

좋은 자바스크립트 타임 픽커란?  (0) 2023.09.24
Symphony 응용프로그램의 독트린 엔티티와 비즈니스 로직  (0) 2023.09.24
Gmail과 NodeJS가 있는 이메일러 없음  (0) 2023.09.24
chart.js로 색상 선을 변경할 수 없습니다.  (0) 2023.09.24
젠드 프레임워크 2에서 렌더 뷰를 비활성화하는 방법?  (0) 2023.09.24

'programing'의 다른글

  • 현재글CDN이 실패한 경우 로컬 스타일시트(스크립트가 아닌)로 폴백하는 방법

관련글

댓글

티스토리툴바