6

スタイルシートの読み込みが完了したら、ajax を介して一連の CSS ファイルを読み込み、アニメーションを呼び出す必要があります。そうしないと、アニメーションが失敗します。

私がそうして、このクロスドメインを行うことに遭遇するまでかなりうまく機能していたことは次のとおりです。

$.get(resource.url, {cache:true}, function(css) {
    //Now that the stylesheet is in the browser cache, it will load instantly:  

    $("head").append($("<link>",{
       rel: "stylesheet",
       type: "text/css",
       href: resource.url
    }));

}).then(function(){
   //Animation here that depends on the loaded css
});

resource.urlこれは、同じドメインにある限り正常に機能します。別のドメインから css を読み込もうとすると、次の$.getように失敗します。

XMLHttpRequest cannot load https://example.com/style.css. Origin https://example.com is not allowed by Access-Control-Allow-Origin.

だから私はCORSをヘッダーに追加しようとしました.htaccess:

<IfModule mod_headers.c>
    #cross domain access is okay for resources (#107)
    <FilesMatch "\.(css|js)$"> 
        Header add Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

これにより、CORS ヘッダーがすべての CSS および JS リソースに追加されます。

何らかの理由で、 CORSは chrome または firefox (最新バージョン) に影響を与えないようです。

また、js ファイルに対して実行する場合、同じドメイン ポリシーが適用されないことに気付きました$.getScriptが、それは次の場合です$.get。

$.get("https://example.com/script.js", {cache: false}, $.noop, "script"); 

//works regardless of CORS

しかし：

$.get("https://example.com/script.js", {cache: false}, $.noop); 

//does not work (cross domain policy violation)

したがって、CORS は広くサポートされておらず、最新のブラウザーの問題を解決していないようにも見えるため、$.getScriptCSS スタイルシートのように動作するものが必要です。

非同期で、コールバック メカニズムが必要です。

何か案は？前もって感謝します...

4

2 に答える 2

8

$.get同一生成元ポリシーに従わなければならないAjaxを使用します。

$.getScript 通常はAjaxを使用しますが、クロスドメインでのみ使用するためのフォールバックオプションもあります。タグを介してインポートされたスクリプト<script>は同一生成元ルールの対象ではないため、jQuery<script>はページにタグを追加し、そのsrc属性を要求されたスクリプトURLに設定するだけです。

<link>タグを介してロードされたCSSリソースについても同じ免除が行われます。<link>完璧な世界では、1）新しい要素を作成し、2）そのhref属性を正しいURLに設定し、3）loadその要素のイベントをリッスンできるはずです。jQueryフォーラムからこのソリューションにコールバックを追加しました：

// note: non-compatible example code, see below for better code
jQuery.getCSS = function( url, media, callback ) {
    jQuery( document.createElement('link') ).attr({
        href: url,
        media: media || 'screen',
        type: 'text/css',
        rel: 'stylesheet'
    }).appendTo('head')
    .on("load", callback);
};

ここでの小さな問題の1つは、クロスブラウザでは機能しないことです。 <link>タグはloadすべてのブラウザでイベントを発生させるわけではありません。発生した可能性のある関数については、 jQueryのバグレポートを参照してください。$.getCSS

したがって、一般的な回避策は少し正気ではありませ<img>ん。新しいタグのソースとしてCSS URLを追加し、そのonerrorハンドラーをリッスンします。

// correct code!
jQuery.getCSS = function( url, media, callback ) {
    jQuery( document.createElement('link') ).attr({
        href: url,
        media: media || 'screen',
        type: 'text/css',
        rel: 'stylesheet'
    }).appendTo('head');

    jQuery( document.createElement('img') ).attr('src', url)
    .on("error", callback);
};

また、少し最適化を追加して、（サポートしているブラウザーの場合）のイベントと（サポートしていないブラウザーloadの場合）のイベントをリッスンし、コールバックが1回だけ呼び出されるようにロジックを配置することもできます。 、両方のイベントが発生した場合。<link>error<img>

延期されたオブジェクトを$.getCSS返すことに関しては、それは私の専門分野から少し外れていますが、それができなかった理論的な理由はありません。

于 2012-07-12T03:57:35.623 に答える