Question

我尝试使用以下代码加载其他css文件：

var doc = document,
    head = doc.getElementsByTagName('head')[0],
    link = doc.createElement('link'),
    file = link.cloneNode(true);

file.type = 'text/css';
file.rel = 'stylesheet';

file.onload = function () {
    alert('css file is loaded!');
};
file.onerror = function () {
    // 404 error
    alert('Script ' + url + ' wasn\'t loaded! Check file URL');
};

file.href = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
head.appendChild(file);

http://jsfiddle.net/d3bcp4dy/1/

在CH，FF，Opera 20+等中完美无缺，

但在Safari5.1，IOS 5.1，Android 4.2及更低版本中无法正常工作！

为什么onload/onerror个活动不适用于.css文件？

P.S。如果我将文件更改为.js - onload或onerror事件有效。

Answer 1

如果通知不可靠，您可以轮询以查看新样式表到达，请参阅注释：

(function() {
    // Remember how many stylesheets there are
    var old = document.styleSheets.length;

    // Set a timeout
    var timeout = Date.now() + 30000;

    // Watch for new arrivals
    var timer = setInterval(function() {
        if (document.styleSheets.length > old) {
            console.log("Got it! " + document.styleSheets.length);
            clearInterval(timer);
        } else if (Date.now() > timeout) {
            console.log("Give up");
            clearInterval(timer);
        }
    }, 100);

    // Add the stylesheet link
    var link = document.createElement('link');
    link.rel = "stylesheet";
    link.href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css";
    link.onload = function() {
        console.log("Got it, clearing timer");
        clearInterval(timer);
        // ...
    };
    link.onerror = function() {
        console.log("Got error, clearing timer");
        clearInterval(timer);
        // ...
    };
    document.querySelector('head').appendChild(link);
})();

使用ajax请求的优势在于您不需要CORS。

注意：为方便起见，我使用上面的Date.now，您需要在您提到的某些浏览器上对其进行填充/填充（或不使用它）。垫片/填充物是微不足道的：

if (!Date.now) {
    Date.now = function() {
        return +new Date;
    };
}

Answer 2

幸运的是，var value = crmForm.all.new_name.datavalue if (value < 1) {"do something";}启用了CORS，因此您可以使用XMLHttpRequest，甚至可以使用

使用提取

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

Polyfill for fetch - https://github.com/github/fetch如果你需要一个forfise，你可能还需要一个补充剂 - https://www.promisejs.org/#browser

如果需要，您也可以使用XMLHttpRequest

fetch('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css')
.then(function(response) {
    return response.text();
})
.then(function(text) {
    var style = document.head.appendChild(document.createElement('style'));
    style.textContent = text;
    console.log('style loaded');
}).catch(function(err) {
    console.error('style load failed with error', err);
});

如果你是为石器时代的浏览器写作，有很多方法可以使用ActiveX垃圾和互联网资源管理器中的一些奇怪的跨域黑客实现同样的东西 - 使用它或其他什么

懒惰加载的css文件

2 个答案: