সিডিএন ব্যর্থ হলে কীভাবে স্থানীয় স্টাইলশিটে ফ্রিব্যাক (স্ক্রিপ্ট নয়) to

Question

আমি সিডিএন-তে জিকুয়েরি মোবাইল স্টাইলশিটে লিঙ্ক করছি এবং সিডিএন ব্যর্থ হলে আমার স্টাইলশিটের স্থানীয় সংস্করণে ফিরে যেতে চাই would স্ক্রিপ্টগুলির জন্য সমাধানটি সুপরিচিত:

<!-- 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" />

আমি নিশ্চিত না যে অনুরূপ পন্থা অর্জন করা যায় কিনা কারণ আমি নিশ্চিত নই যে কোনও স্ক্রিপ্টটি লোড করার সময় ব্রাউজারটি যেমন কোনও লিঙ্কটিকে লিঙ্ক করার সময় একইভাবে ব্লক করে কিনা (সম্ভবত কোনও স্ক্রিপ্ট ট্যাগে স্টাইলশিট লোড করা সম্ভব হয়) এটি পৃষ্ঠাতে ইনজেকশন করবেন)?

সুতরাং আমার প্রশ্নটি: কোনও সিডিএন ব্যর্থ হলে আমি কীভাবে স্থানীয় স্টাইলশিটটি লোড করা যায় তা নিশ্চিত করব?

Comments

আমি এটিও সম্ভব কিনা তা জানতে চাই ... আমি যদি সিডিএনটি ডাউন হওয়ার বিষয়ে সত্যিই আঁতকে উঠি তবে আমি কেবল স্থানীয় হোস্টিং ব্যবহার করব।

— ফস্কো

@ স্টেফান কেন্ডাল, আমি মনে করি সঠিক বক্তব্যটি হ'ল তার সাইটটি সিডিএন

— শন ম্লেয়ান

শ্রেষ্ঠ উপায়: stackoverflow.com/questions/26192897/...

— nmit026

Answer 1

ক্রস ব্রাউজার পরীক্ষিত নয় তবে আমি মনে করি এটি কার্যকর হবে। আপনি যদিও 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>

Comments

ভাল সমাধান, একটি বিষয় যা এটি সমাধান করে না তা হ'ল সিডিএন যদি লোড করার পক্ষে খুব ধীর হয় ... তবে কোনও ধরণের সময়সীমা শেষ হতে পারে?

— জর্জউ

জন্য code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css , আমি নিয়ম = নাল পেতে, যদিও এটি সঠিকভাবে লোড করা হয়েছে। আমি ক্রোম 26 ব্যবহার করছি এবং আমার মনে হয় এটি স্ক্রিপ্ট ক্রস ডোমেনের কারণ?

— সিম্পলফুজ

সমাধানটি সমস্ত সিডিএন / স্টাইলশিটগুলির জন্য কার্যকরভাবে কাজ করে না, উদাহরণস্বরূপ CSSStyleSheetবুটস্ট্র্যাপসিডিএন.কম থেকে আসা জেএস অবজেক্টগুলির সমস্তই আমার ব্রাউজারে খালি rulesএবং cssRulesক্ষেত্রগুলি রয়েছে (ক্রোম 31)। ইউপিডি : এটি আসলে ক্রসডোমেন ইস্যু হতে পারে, উত্তরে সিএসএস ফাইলও আমার কাজ করে না।

— মাকসিম ভি।

এটি onerrorইভেন্ট ব্যবহার করে ভাল soloution । stackoverflow.com/questions/30546795/…

— রাসায়নিক প্রোগ্রামার

এটি কি অন্য ডোমেন থেকে লোড হওয়া সিএসএসের জন্য কাজ করে? না, আপনি বাহ্যিক স্টাইলশিটের জন্য .rules/ গণনা করতে পারবেন না .cssRules। jsfiddle.net/E6yYN/13

— সালমান এ

Answer 2

আমার ধারণা, স্টাইলশিটটি লোড হয়েছে কি না তা সনাক্ত করা প্রশ্নটি question নিম্নলিখিত একটি সম্ভাব্য পন্থা:

1) আপনার সিএসএস ফাইলের শেষে একটি বিশেষ নিয়ম যুক্ত করুন, যেমন:

#foo { display: none !important; }

2) আপনার এইচটিএমএলে সংশ্লিষ্ট ডিভ যুক্ত করুন:

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

৩) নথি প্রস্তুতের সময়, চাক্ষুষ রয়েছে কিনা তা যাচাই করুন #foo। স্টাইলশিটটি লোড করা থাকলে তা দৃশ্যমান হবে না।

ডেমো এখানে - jquery-ui মসৃণতা থিম লোড; স্টাইলশিটে কোনও নিয়ম যুক্ত করা হয় না।

Comments

চতুর সমাধানের জন্য +1 কেবল সমস্যাটি হ'ল, কেউ সাধারণত স্টাইল শিটের শেষে একটি লাইন যোগ করতে পারে না যা কারও সিডিএন-তে হোস্ট করা হয়

— জ্যানি থিউনিসেন

দুর্ভাগ্যক্রমে, আমরা সিডিএন ফাইলগুলিতে আমাদের নিজস্ব ক্লাসে টাইপ করতে পারি না। হতে পারে আমরা ইতিমধ্যে বিদ্যমান একটি ব্যবহার করার চেষ্টা করতে পারেন।

— আহমেদ

আমি এই একটি অনেক পছন্দ, আপনাকে ধন্যবাদ। এটা সত্যিই বেশ শক্তিশালী। স্পষ্টতই আমি সিডিএন স্টাইলশিটটি পরিচালনা করতে পারি না তবে আমি জানি কোন ক্লাসগুলি ব্যবহার করা হচ্ছে তাই আমি কোডটি সংশোধন করে

— চেকগুলি

এনবি: আপনাকে বাহ্যিক সিএসএসে সত্যিই নতুন নিয়ম যুক্ত করতে হবে না । কেবল একটি বিদ্যমান নিয়ম ব্যবহার করুন যার আচরণ পরিচিত। আমার ডেমোতে আমি ইউআই-সহায়ক-লুকানো শ্রেণি ব্যবহার করি যা উপাদানটি আড়াল করার কথা, আমি তারপরে পরীক্ষা করে দেখি উপাদানটি পৃষ্ঠা লোডে লুকিয়ে রয়েছে কিনা।

— সালমান এ

Answer 3

ধরে নিই যে আপনি সিএসএস এবং জিকুয়েরির জন্য একই সিডিএন ব্যবহার করছেন, কেন কেবল একটি পরীক্ষা করে এটি সব ধরা পড়বেন না ??

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

Comments

আমি কি জিজ্ঞাসা করতে পারি প্রাথমিকভাবে আনসকেপড স্ট্রিংগুলি ব্যবহার করে সমস্যাটি কী document.write("<script type='text/javascript' src='path/to/file.js'>")?

— জ্যাক টাক

@ জ্যাকটাক: পার্সার <script>জেএস স্ট্রিংয়ের ভিতরে এবং বাইরের একটির মধ্যে পার্থক্য করতে পারে না । এটি <\/script>সিডিএন ফ্যালব্যাকগুলির জন্য ট্যাগ লেখার সময় আপনি সাধারণত দেখতে পান।

— ব্র্যাড ক্রিস্টি

-1 why not just do one test and catch it all?- কারণ এক মিলিয়ন কারণ রয়েছে যে কোনও ব্যর্থ হতে পারে এবং অন্যরা সফল হয়।

— ফ্লিমজি

Answer 4

এই নিবন্ধটি বুটস্ট্র্যাপ 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="https://stackoverflow.com/css/font-awesome.min.css" rel="stylesheet">');
        }
        $span.remove();
    })(jQuery);
</script>

Comments

ফন্ট আশ্চর্য 5 এর সাথে এটি ব্যবহার করার জন্য যারা খুঁজছেন তাদের জন্য আপনি 'ফন্টআউবাইজ' (যদি এই ধারাটিতে) 'ফন্ট অসাধারণ 5 ফ্রি' (আপনি যদি ফ্রি ফন্ট ব্যবহার করছেন) তে পরিবর্তন করতে চান। অন্যথায়, এটা ঠিক কাজ করা উচিত।

— জেসন ক্লার্ক

Answer 5

আপনি স্টাইলশীটের অস্তিত্বের জন্য পরীক্ষা করতে সক্ষম হতে পারেন 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

আপনি যে সিএসএস ফাইল ব্যবহার করছেন সেটি নির্দিষ্ট করে পরীক্ষা করার জন্য।

Answer 6

যে কেউ এর onerrorজন্য ব্যবহার করতে পারে :

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

this.onerror=null;ফলব্যাক এটা স্ব উপলব্ধ নয় ক্ষেত্রে অবিরাম লুপ এড়িয়ে চলা। তবে এটি একাধিক ফলব্যাকগুলিও ব্যবহার করতে পারে।

তবে এটি বর্তমানে কেবল ফায়ারফক্স এবং ক্রোমে কাজ করে।

Answer 7

কেটি ল্যাভালির উত্তরের জন্য এখানে একটি বর্ধিতাংশ দেওয়া আছে। পরিবর্তনশীল সংঘর্ষ রোধ করতে আমি স্ব-সম্পাদনকারী ফাংশন সিনট্যাক্সে সমস্ত কিছু আবৃত করেছি। আমি স্ক্রিপ্টটিও একটি লিঙ্কে অ-নির্দিষ্ট করে দিয়েছি। IE, এখন "ডেটা-ফ্যালব্যাক" ইউআরএল বৈশিষ্ট্যের সাথে কোনও স্টাইলশিট লিঙ্ক স্বয়ংক্রিয়ভাবে বিশ্লেষণ করা হবে। আপনাকে আগের মতো এই স্ক্রিপ্টটিতে ইউআরএলগুলি হার্ড-কোড করতে হবে না। নোট করুন যে এটি <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);

Comments

আমি এনক্যাপসুলেশনটি পছন্দ করি তবে সাধারণভাবে আপনি ক্রস-ডোমেন স্টাইলশিটের জন্য শীট.রুলগুলি পরীক্ষা করতে পারবেন না। আপনি এখনও এই সাধারণ ধারণাটি ব্যবহার করতে পারেন তবে আলাদা চেক করা দরকার।

— জন বিনোপাল

আপনার সাথে অ্যাট্রিবিউটগুলি document.styleSheets[i].ownerNode.datasetঅ্যাক্সেস করতে পারেন<link data-* />

— আলউইন কেসলার

Answer 8

কোনও সিডিএন ব্যর্থ হলে আপনি কি সত্যিই এই জাভাস্ক্রিপ্টের রুটটি সিএসএস লোড করতে চান?

আমি সমস্ত পারফরম্যান্সের প্রভাবগুলির মধ্যে দিয়ে ভাবিনি তবে আপনি সিএসএস লোড হওয়ার সময় এবং সাধারণভাবে পৃষ্ঠা লোড পারফরম্যান্সের নিয়ন্ত্রণ হারাতে চলেছেন, এইচটিএমএলের পরে সিএসএস প্রথম জিনিস আপনি ডাউনলোড করতে চান।

পরিকাঠামো স্তরে কেন এটি হ্যান্ডেল করবেন না - আপনার নিজস্ব ডোমেনের নাম সিডিএন এ ম্যাপ করুন, একটি সংক্ষিপ্ত টিটিএল দিন, সিডিএন-তে ফাইলগুলি নিরীক্ষণ করুন (যেমন ওয়াচহাউস বা অন্য কিছু ব্যবহার করুন), সিডিএন ব্যর্থ হলে ডিএনএসটিকে ব্যাকআপ সাইটে পরিবর্তন করুন।

স্ট্যাটিক সামগ্রীগুলিতে অন্যান্য বিকল্পগুলি "চিরতরে ক্যাশে" সহায়তা করতে পারে তবে ব্রাউজার অবশ্যই অবশ্যই রাখবে বা অ্যাপ-ক্যাশে ব্যবহার করবে এমন কোনও গ্যারান্টি নেই।

বাস্তবে যেমন কেউ শীর্ষে বলেছিল, আপনার সিডিএন যদি বিশ্বাসযোগ্য না হয় তবে একটি নতুন পান

অ্যান্ডি

Comments

সিডিএন নির্ভরযোগ্য হতে পারে, তবে উন্নয়নের পরিবেশ ইন্টারনেট সংযোগ নয়;)

— আইসব্রেকার

Answer 9

এই ফাংশনগুলি দেখুন:

$.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">')
}

অ্যাডলোকলসিএসকে মাথায় ডাকা হয়েছে তা নিশ্চিত করুন।

আপনি এই উত্তরে বর্ণিত নীচের একটি পদ্ধতি ব্যবহার করেও বিবেচনা করতে পারেন :

এজেএক্স ব্যবহার করে লোড করুন

$.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");

Comments

হ্যাঁ, অন্তত আধুনিক ব্রাউজারে, আমি আই 6 সম্পর্কে নিশ্চিত নই।

পুরো জিনিসটি ডাউনলোড করার পরিবর্তে কি চেক করার কোনও উপায় আছে?

— শন ম্লেয়ান

ওপিগুলির অনুরোধটি করার একমাত্র সম্ভাব্য কারণ হ'ল অতিরিক্ত নেটওয়ার্ক ট্র্যাফিক এড়ানো। এটি অতিরিক্ত নেটওয়ার্ক ট্র্যাফিক তৈরি করে।

— স্টিফান কেন্ডাল

@ স্টেফান কেন্ডল: এটি ফাইলের ভার লোড হওয়ার বিষয়টি নিশ্চিত করতে চাইলেও এমন সম্ভাব্য কারণ নয়।

যদি এটিই ছিল উদ্বেগ, আপনি কেবল একটি সিডিএন ব্যবহার করবেন না। কেবল শিরোনামের পরীক্ষা করা আরও ভাল তবে আমি নিশ্চিত যে বেশিরভাগ সিডিএন এবং আপনার ব্রাউজার এক্সএসএসকে অনুমতি দিচ্ছে না।

— স্টেফান কেন্ডাল

Answer 10

আমি সম্ভবত 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');
    }
  }
}]);

রিডমি থেকে নেওয়া ।

Comments

@ বেনশওয়ার্জ, এর অর্থ এই নয় যে আপনি কিছু অপ্রাসঙ্গিক কোড পেস্ট করতে পারেন যা কোনওভাবেই জিজ্ঞাসিত প্রশ্নের উত্তর দেয় না।

— AlicanC

Answer 11

//(load your cdn lib here first)

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