6

すでに同様の投稿がありますが、私の特定の質問に十分に答えているとは思いません。

外部スタイルシートが読み込まれたことを確認したい。たとえば、ネットワークの問題によって妨げられている場合は、フォールバックを知り、ロードしたいと考えています。これは、jQuery のテーマ CSS の CDN のフォールバックとしてのものですが、これを適用したい他の外部 CSS を使用しているため、これが特にそれについてであることにはならないようにしたいと思います。

  • 参照link要素はページ上に存在するため、head 内の link 要素の存在に対するパターン マッチングは受け入れられません。
  • スタイルシートの CSS を変更する機能がないため、ダミーの CSS を追加することはできません。
  • 私は外部スタイルシートの CSS を制御できないため、CSS の既存のクラスに依存するのは脆弱です。別の解決策があればいいのですが。
  • タイムアウトを使用する唯一の方法ですか? どのくらいの期間設定すればよいですか？時間を測定するには、どのイベントを選択すればよいですか?
  • 私は純粋なjavascript、次にjQueryを好みますが、他のjavascriptフレームワークに対する回答は、間違いなく誰かに役立つため、受け入れられます。

編集：新しい考え。スタイルシートが AJAX 経由で読み込まれ、ステータス コードがチェックされた場合はどうなるでしょうか。それは実行可能なオプションですか、誰か知っていますか?

これが私が現在持っているスクリプトです：

<script type="text/javascript">
  var cdn = 'http://code.jquery.com/ui/1.10.1/themes/black-tie/jquery-ui.min.css';
  var ss = document.styleSheets;
  for (var i = 0, max = ss.length; i < max; i++) {
    var sheet = ss[i];
    var rules = sheet.rules ? sheet.rules : sheet.cssRules;
    if (sheet.href == cdn) {
      if ( rules == null || rules.length == 0) {
        var link = document.createElement("link");
        link.rel = "stylesheet";      
        link.href = '/js/jquery-ui/1.10.1/themes/black-tie/jquery-ui.min.css';
        document.getElementsByTagName("head")[0].appendChild(link);  
      }
      break;
    }  
  }
</script>

コンソール (Chrome v25.0.1364.172) を使用してわかったことは、スタイルシートが CDN から読み込まれた場合でもdocument.styleSheets[x].rules、null. コンソールで正しくアクセスしているかどうかはわかりませんが、使用または反対すべき別の機能があるのではないでしょうか?

CSSStyleSheet {rules: null, cssRules: null, ownerRule: null, media: MediaList, title: null…}
cssRules: null
disabled: false
href: "http://code.jquery.com/ui/1.10.1/themes/black-tie/jquery-ui.min.css"
media: MediaList
ownerNode: link
ownerRule: null
parentStyleSheet: null
rules: null
title: null
type: "text/css"
__proto__: CSSStyleSheet

スタイルシートが読み込まれたことを確認する方法を誰かが見つけてくれれば、それは非常に役に立ち、非常にありがたいです。

4

1 に答える 1

5

ノート：

rack-jquery_ui-themes ライブラリの github リポジトリで製品コードを参照してください。定数のすべての補間と のような大文字記号を無視し、:THEME他の場所で置換されます。手付かずの JavaScript だと想像してみてください。

何が機能したか

これに対する主なインスピレーションの源を提供してくれた私の質問へのコメントでブライアンに感謝します。

<meta id='rack-jquery-ui-themes-fallback-beacon' />
<script type="text/javascript">
  var meta = $("#rack-jquery-ui-themes-fallback-beacon");
  meta.addClass("ui-icon");
  if ( meta.css('width') != "16px" ) {
    $('<link rel="stylesheet" type="text/css" href="/js/jquery-ui/#{JQueryUI::JQUERY_UI_VERSION}/themes/:THEME/#{JQUERY_UI_THEME_FILE}" />').appendTo('head');
  }
  meta.remove();
</script>

メタ タグを追加し、jQuery UI スタイルシートから CSS クラスを適用し、変更されていることを確認し、そうでない場合はフォールバック リンクを追加し、メタ タグを削除します。

body の div のようなものではなく、head にmeta タグを使用するのには理由があります。ほとんどの CSS ファイルは、head 内の link 要素によってインクルードされます。その直後に読み込まれたかどうかを確認するスクリプトが来ると、head のコンテキストにあるため、body はまだ DOM に読み込まれていません。そのコンテキストで document.body にアクセスすると、null ref エラーが発生します。

うまくいかなかったこと

AJAX を使用して HEAD リクエストを作成し、ステータスを確認します。

<script type="text/javascript">
  $.ajax({
    type: "HEAD",
    url: ':CDNURL',
    success: function(css,status) {
      // do nothing
    },
    error: function(xhr,status,error) {
      var link = document.createElement("link");
      link.rel = "stylesheet";     
      link.href = ':FALLBACK_URL';
      document.getElementsByTagName("head")[0].appendChild(link); 
    }
  });
</script>

これは潜在的なセキュリティ上の脅威であるため、ブラウザが許可しないことがわかりました。

スタイルシート ルールの DOM を確認します。

<script type="text/javascript">
  var has_jquery_rules = false;
  var i = document.styleSheets.length - 1;
  while (i >= 0 ) {
    var sheet = document.styleSheets[i];
    if(sheet.href == ":CDNURL/ui/#{JQueryUI::JQUERY_UI_VERSION}/themes/:THEME/jquery-ui.min.css") {
      var rules = sheet.rules ? sheet.rules : sheet.cssRules;
      has_jquery_rules = rules.length == 0 ? false : true;
      break; // end the loop.
    }
    has_jquery_rules = false;
    i--;
  }
  if ( has_jquery_rules == false ) {
    $('<link rel="stylesheet" type="text/css" href="/js/jquery-ui/#{JQueryUI::JQUERY_UI_VERSION}/themes/:THEME/#{JQUERY_UI_THEME_FILE}" />').appendTo('head');
  }
</script>

一部の (すべて?) ブラウザは、外部スタイルシートによって追加されたルールへのアクセスをブロックするため、これも機能しません。

于 2013-08-06T22:39:59.727 に答える