如何通过ajax加载样式表并在加载完成后进行回调

Question

我需要通过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(最新版本)没有影响.

我也注意到在执行$.getScriptjs文件时没有强制实施相同的域策略,但它适用于$.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样式表.

它需要是异步的并且具有回调机制.

有任何想法吗？提前致谢...

Answer 1

$.get 使用Ajax,它必须遵守同源策略.

$.getScript 通常使用Ajax,但它也有一个仅用于跨域使用的后备选项.通过<script>标记导入的脚本不受Same-Origin规则的约束,因此jQuery只是<script>向页面添加标记并将其src属性设置为请求的脚本URL.

对通过<link>标签加载的CSS资源进行相同的豁免.在一个完美的世界中,你应该能够1)创建一个新<link>元素,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);
};

这里有一个小问题:它不能跨浏览器工作. <link>标签不会load在所有浏览器中触发事件 - 请参阅本机函数的jQuery错误报告$.getCSS.

因此,一般情况下的解决方法有点疯狂:添加CSS URL作为新<img>标记的源并监听其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的事件<link>(用于支持它的浏览器)和一个error对事件<img>(对于那些不这样做),并把一些逻辑,以确保回调只会被调用一次,如果两个事件都发生.

至于$.getCSS退货是一个延迟对象,这有点超出我的专业领域,但没有理论上的原因,为什么它无法完成.