1. ホーム
  2. html

[解決済み] CDNが失敗したときにローカルのスタイルシート(スクリプトではない)にフォールバックする方法

2022-10-01 22:27:14

質問

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

スクリプトをリンクするときに、ブラウザがスクリプトを読み込むときと同じようにブロックするかどうかがわからないので、同様のアプローチが可能かどうかはわかりません(scriptタグでスタイルシートを読み込み、それをページに注入することは可能かもしれません)?

私の質問は、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>