延遲加載CSS文件

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文件不起作用？

ps如果我將文件更改為.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

幸運的是， https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css ：//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css已啟用CORS，因此您可以使用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);
});

用於獲取的Polyfill- https://github.com/github/fetch如果您需要獲取一個Polyfill，則可能還需要一個Promise的polyfill- https://www.promisejs.org/#browser

您也可以使用XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
xhr.addEventListener('load', function() {
    console.log('style loaded', this.responseText);
});
xhr.addEventListener('error', function(e) {
    console.error('style load failed');
});
xhr.send();

而且，如果您是為石器時代的瀏覽器而寫的，則有多種方法可以使用ActiveX垃圾和Internet Explorer中的一些奇怪的跨域hack來實現同一目的-使用它或其他方法