如何检查是否使用Javascript加载了外部（跨域）CSS文件

Question

我有一个使用以下功能的功能javascript：

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

现在getComputedStyle正在返回默认值，如果我在调用之前使用Firebug 等待
断点getComputedStyle，则它将从注入的CSS返回CSS规则。

问候，
穆尼姆

Answer 1

这实际上是我所做的。

为了确保加载特定的CSS文件，我在CSS文件的末尾添加了样式。例如：

#ensure-cssload-8473649 {
  display: none
}

现在，我有了一个JavaScript函数，它将在页面上加载上述样式时触发指定的回调：

var onCssLoad = function (options, callback) {
    var body = $("body");
    var div = document.createElement(constants.TAG_DIV);
    for (var key in options) {
        if (options.hasOwnProperty(key)) {
            if (key.toLowerCase() === "css") {
                continue;
            }
            div[key] = options[key];
        }
    }

    var css = options.css;
    if (css) {
        body.appendChild(div);
        var handle = -1;
        handle = window.setInterval(function () {
            var match = true;
            for (var key in css) {
                if (css.hasOwnProperty(key)) {
                    match = match && utils.getStyle(div, key) === css[key];
                }
            }

            if (match === true) {
                window.clearTimeout(handle);
                body.removeChild(div);
                callback();
            }
        }, 100);
    }
}

这就是我使用上面函数的方式：

onCssLoad({
    "id": "ensure-cssload-8473649",
    css: {
        display: "none"
    }
}, function () {
    // code when you want to execute 
    // after your CSS file is loaded
});

这里的第一个参数采用optionswhere id来检查 测试样式 和css属性，以验证从CSS加载的内容。