小编典典

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

css

我有一个使用以下功能的功能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规则。

问候,
穆尼姆


阅读 356

收藏
2020-05-16

共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加载的内容。

2020-05-16