スタイルシートの読み込みが完了したら、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 は広くサポートされておらず、最新のブラウザーの問題を解決していないようにも見えるため、$.getScript
CSS スタイルシートのように動作するものが必要です。
非同期で、コールバック メカニズムが必要です。
何か案は?前もって感謝します...