如何通过 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 在同一个域中，它就可以正常工作。一旦我尝试从另一个域 $.get 加载 css，就会像这样失败：

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

所以我尝试通过.htaccess将CORS添加到标头中：

<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 样式表。

需要异步并有回调机制。

有什么想法吗？提前谢谢...

Answer 1

$.get 使用 Ajax，必须遵守同源策略。

$.getScript 通常使用 Ajax，但它也有一个仅用于跨域使用的后备选项。通过<script> 标签导入的脚本不受同源规则的约束，因此 jQuery 只需在页面中添加一个<script> 标签并将其src 属性设置为请求的脚本 URL。

对于通过 <link> 标签加载的 CSS 资源，也有同样的豁免。在一个完美的世界中，您应该能够 1) 创建一个新的 <link> 元素，2) 将其 href 属性设置为正确的 URL，以及 3) 在该元素上侦听 load 事件。我从 jQuery 论坛添加了对 this solution 的回调：

// 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 bug report 了解可能的 $.getCSS 函数。

所以，一般情况下workaround is a bit insane：添加 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);
};

您还可以添加一些优化并在 <link> 上监听 load 事件（对于支持它的浏览器）和在 <img> 上的 error 事件（对于那些没有），并放置一些逻辑以确保回调只被调用一次，以防两个事件都发生。

至于让$.getCSS返回一个延迟对象，这有点超出我的专业领域，但没有理论上的理由不能做到。

Answer 2

使用延迟而不是创建 jQuery 插件，将我自己的 apsillers 答案的实现放在一起。

fetchStyleSheet(url, media = 'screen') {
    let $dfd = $.Deferred(),
        finish = () => $dfd.resolve(),
        $link = $(document.createElement('link'))
            .attr({
                media,
                type: 'text/css',
                rel: 'stylesheet'
            })
            .on('load', 'error', finish)
            .appendTo('head'),
        $img = $(document.createElement('img'))
            .on('error', finish); // Support browsers that don't fire events on link elements

    $link[0].href = $img[0].src = url;
    return $dfd.promise();
}

fetchStyleSheet('/url/to/my/stylesheet.css').done(() => {
    // Stuff after the sheet has loaded
});

这个话题已经有好几年了，我不知道 img 上的备份事件是否仍然需要，但实现起来似乎相当简单。

对于我的特定用例，我实际上并不关心工作表是否无法加载，因此这两种情况都得到了解决。如果您想单独处理这些案例，您可以将参数传递给 finish 处理程序以适当地解决/拒绝。