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

问题描述

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

I have a function doing the following using javascript:

1. 创建链接


2. 在头标记中插入链接元素。


3. 创建div元素。


4. 使用setAttribute


5. appendChild 设置类名。


6. 现在使用 document.defaultView.getComputedStyle（divElement，null）[cssRule] 获得CSS规则值。

1. Create link element and set href=cssFile.
2. Insert the link element in head tag.
3. Create a div element.
4. Set the class name using setAttribute
5. appendChild the div on body.
6. Now getting CSS rule value using document.defaultView.getComputedStyle(divElement, null)[cssRule].

b $ b

现在 getComputedStyle 正在返回默认值，如果我等待断点使用Firebug getComputedStyle

Now getComputedStyle is returning the default values, and if I wait on breakpoint using Firebug before getComputedStyle call, then it returns the CSS rule from the CSS injected.

注意，

Munim

Regards,
Munim

推荐答案

这其实是我做的。

，我在CSS文件的末尾添加了一个样式。例如：

To ensure a specific CSS file is loaded, I added a style in the end of the CSS file. For example:

#ensure-cssload-8473649 {
  display: none
}

现在我有一个JavaScript函数，当加载上述样式时会触发指定的回调

Now I have a JavaScript function which will fire the callback specified when the above style is loaded on the page:

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);
    }
}

这是我如何使用上面的函数： / p>



And this is how I used the function above:

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

这里的第一个参数使用选项 id 是针对测试样式和css属性进行检查，以验证从CSS加载的内容。

Here the 1st parameter takes the options where id is to check against the test style and css property to verify against what loaded from the CSS.

这篇关于如何检查是否使用Javascript加载外部（跨网域）CSS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！