从不同的域加载CSS，并从Javascript访问它

CORS(跨来源资源共享(是一种允许站点选择跨来源访问资源的标准。我不知道Firefox是否将此应用于CSS；我知道它适用于XMLHttpRequest，而且它将适用于大多数其他跨域请求限制，但我还没有在您的确切用例中测试过它。

您可以将以下标题添加到static.site.com的响应中，以允许您的主页访问从那里提供的资源的内容：

Access-Control-Allow-Origin: http://site.com

甚至，如果你不认为static.site.com上的任何内容是敏感的：

Access-Control-Allow-Origin: *

Mozilla开发者网络提供了更多信息。

我写了一个小函数，可以解决包括FF在内的跨浏览器加载问题。GitHub上的评论有助于解释用法。完整代码位于https://github.com/srolfe26/getXDomainCSS.

免责声明：下面的代码依赖于jQuery。

有时，如果你从一个无法控制CORS设置的地方提取CSS，你仍然可以用<link>标签获得CSS，那么需要解决的主要问题就是知道你对CSS的调用何时已经加载并准备好使用。在较旧的IE中，可以在加载CSS时运行on_load侦听器。

较新的浏览器似乎需要老式的轮询来确定何时加载文件，并且在确定何时满足加载时存在一些跨浏览器问题。请参阅下面的代码，了解其中的一些怪癖。

/**
 * Retrieves CSS files from a cross-domain source via javascript. Provides a jQuery implemented
 * promise object that can be used for callbacks for when the CSS is actually completely loaded.
 * The 'onload' function works for IE, while the 'style/cssRules' version works everywhere else
 * and accounts for differences per-browser.
 *
 * @param   {String}    url     The url/uri for the CSS file to request
 * 
 * @returns {Object}    A jQuery Deferred object that can be used for 
 */
function getXDomainCSS(url) {
    var link,
        style,
        interval,
        timeout = 60000,                        // 1 minute seems like a good timeout
        counter = 0,                            // Used to compare try time against timeout
        step = 30,                              // Amount of wait time on each load check
        docStyles = document.styleSheets        // local reference
        ssCount = docStyles.length,             // Initial stylesheet count
        promise = $.Deferred();
    // IE 8 & 9 it is best to use 'onload'. style[0].sheet.cssRules has problems.
    if (navigator.appVersion.indexOf("MSIE") != -1) {
        link = document.createElement('link');
        link.type = "text/css";
        link.rel = "stylesheet";
        link.href = url;
        link.onload = function () {
            promise.resolve();
        }
        document.getElementsByTagName('head')[0].appendChild(link);
    }
    // Support for FF, Chrome, Safari, and Opera
    else {
        style = $('<style>')
            .text('@import "' + url + '"')
            .attr({
                 // Adding this attribute allows the file to still be identified as an external
                 // resource in developer tools.
                 'data-uri': url
            })
            .appendTo('body');
        // This setInterval will detect when style rules for our stylesheet have loaded.
        interval = setInterval(function() {
            try {
                // This will fail in Firefox (and kick us to the catch statement) if there are no 
                // style rules.
                style[0].sheet.cssRules;
                // The above statement will succeed in Chrome even if the file isn't loaded yet
                // but Chrome won't increment the styleSheet length until the file is loaded.
                if(ssCount === docStyles.length) {
                    throw(url + ' not loaded yet');
                }
                else {
                    var loaded = false,
                        href,
                        n;
                    // If there are multiple files being loaded at once, we need to make sure that 
                    // the new file is this file
                    for (n = docStyles.length - 1; n >= 0; n--) {
                        href = docStyles[n].cssRules[0].href;
                        if (typeof href != 'undefined' && href === url) {
                            // If there is an HTTP error there is no way to consistently
                            // know it and handle it. The file is considered 'loaded', but
                            // the console should will the HTTP error.
                            loaded = true;
                            break;
                        }
                    }
                    if (loaded === false) {
                        throw(url + ' not loaded yet');
                    }
                }
                // If an error wasn't thrown by this point in execution, the stylesheet is loaded, proceed.
                promise.resolve();
                clearInterval(interval);
            } catch (e) {
                counter += step;
                if (counter > timeout) {
                    // Time out so that the interval doesn't run indefinitely.
                    clearInterval(interval);
                    promise.reject();
                }
            }
        }, step);   
    }
    return promise;
}