3

<link>タグを作成してからhref属性を指定することで動的に作成された CSS が実際に読み込まれたかどうかを識別する方法が見つかりません。

次の例を検討してください。

var css = document.createElement("link");
css.href = "not-a-directory/not-a-css";
document.body.appendChild(css);

一部のブラウザー (Firefox) は"onload"、パスが既存のファイルを指定していない場合でもイベントを送出しますが、これは、ファイルが存在する場合に、サンドボックス ポリシーに違反していない場合にのみ発生します。Opera、Google Chrome、および Safari - すべて何らかの方法で問題が報告されていますが、JavaScript でそれを処理する方法が見つかりません。

MS Internet Explorer のサポートには興味がありませんが (プロジェクトは組み込みの WebKit / Opera ブラウザーに展開されます)、クロスプラットフォームの方法があれば、もちろん歓迎します。

PS。"onerror"どのブラウザでもトリガーされないようです。

明確化

申し訳ありませんが、さらに情報を提供する必要がありました。今、私はそれを修正しようとします:

  1. 私は他のライブラリ (jQuery など) を使用しないことを好みますが、それらが何らかの形で解決した場合、それは有効な解決策です。

  2. コードは、SmartTV の Opera または WebKit ブラウザにデプロイされます (厳しいサイズ制限と、ネットからではなくファイル システムからファイルをロードする必要がある場合があるため、お読みください)。これが使えない理由ですXMLHttpRequest。

  3. パスを指定してテキスト ファイルが存在するかどうかをテストする方法を考えられる場合 (たとえば、iframe他linkの要素を考えてみてください)、それも良いオプションです。

4

3 に答える 3

0

それを検出するエレガントで信頼できる方法はなく、すべてが多かれ少なかれハックであることは私の理解です。

これが私の頭の上のハックです：

    $.ajax({
        url: "/style.css",
        dataType: "text",
        success: function (cssString) {
            // css file exists, and was loaded correctly.
            $("head").append($("<style/>").text(cssString));
        },
        error: function (e) {
            // css file did not exist, we can check status code with e.status (404 etc)
        }
    });

基本的に ajax を使用して css ファイルをテキストとして読み込み、読み込んだデータを dom にアタッチします。このようにして、確実に障害を検出できますが、それ以外は完全なハックです。ほとんどの場合、スタイル設定されていないコンテンツのフラッシュが表示されます。私はそれを使うかどうか確信が持てませんが、他のすべてのハックと一緒にそこに捨てるのは楽しいかもしれないと思いました:-)

于 2013-05-06T14:59:04.473 に答える
0

ロードする必要がある特定のクラス名がわかっている場合は、javascript を使用してすべてのスタイル シートとクラス名をループし、ロードされているかどうかを確認できます。

于 2013-05-06T14:52:24.113 に答える