[解決済み] 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>
関連
-
[解決済み] ジャンボトロンのセンター出しは?
-
[解決済み] HTMLとCSSによるテーブルスクロール [重複]について
-
[解決済み] HTMLで複数選択を許さないリストボックスを作るには?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] <meta charset="utf-8"> vs <meta http-equiv="Content-Type">.
-
[解決済み] 入力テキストボックスの値を取得する
-
[解決済み] ボディの高さをブラウザの高さの100%にする
-
[解決済み] HTML5で(非空白の)自己閉鎖タグは有効ですか?
-
[解決済み] MIME-typeが原因でスタイルシートが読み込まれない
-
[解決済み] div内の画像の下に余分なスペースがある
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 横型リストアイテム
-
[解決済み] cssのfit-contentで横幅を自動サイズ調整する
-
[解決済み] input type="button "に背景画像を追加するには?
-
[解決済み] CSSでテキストを垂直方向にセンタリングするには?[重複しています]
-
[解決済み] XHTMLの自己完結型タグを除くオープンタグにマッチするRegEx
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み] divブロック内のテキストを(水平方向と垂直方向に)センタリングするにはどうすればよいですか?
-
[解決済み] 特定のクラスや属性を持たない要素を選択するCSSセレクタは書けますか?
-
[解決済み] メモ帳++でXML/HTMLを自動整形/インデントする方法
-
[解決済み] BootstrapはCDNから使うべきか、それとも自分のサーバーにコピーを作るべきか?