javascript - 如何检查是否使用 Javascript 加载了外部(跨域)CSS 文件

Question

我有一个使用 javascript 执行以下操作的函数:

1. 创建链接元素并设置 href=cssFile。
2. 在 head 标签中插入 link 元素。
3. 创建一个 div 元素。
4. 使用 setAttribute 设置类名
5. appendChild body 上的 div。
6. 现在使用 document.defaultView.getComputedStyle(divElement, null)[cssRule] 获取 CSS 规则值。

现在 getComputedStyle 正在返回默认值，如果我在 breakpoint 上等待 getComputedStyle 调用之前使用 Firebug，那么它会返回 CSS 规则来自注入(inject)的 CSS。

问候，
穆尼姆

Answer 1

您可以创建动态 css url 并使用普通的 ajax 调用将 css 作为纯文本获取。

然后使用它来加载 css:

function loadCss(cssText, callback){
    var style = document.createElement('style');
    style.type='text/css';
    if(callBack != undefined){
        style.onload = function(){
            callBack();
        };
    }
    style.innerHTML = cssText;
    head.appendChild(style);
}

然后像这样使用它:

loadCss(ajaxResponseText, function(){
    console.log("yaay css loaded, now i can access css defs");
})