Question

我加载了css

var ss = document.createElement("link");
var url = 'http://site.ru/style.css';
ss.setAttribute("rel", "stylesheet");
ss.setAttribute("type", "text/css");
ss.setAttribute("href", url);
document.getElementsByTagName("head")[0].appendChild(ss);

我想在css加载后调用函数，但是标记链接没有onload事件，有没有办法做到这一点？

Answer 1

你目前没有通过Ajax加载那些css的东西，但你可以这样做。这样，数据传输完成后，您还可以进行回调。我在这个例子中使用jQuery来简化和方便。

请注意：这只适用于您的javascript＆amp;您的css文件位于同一个域中。

$.get('http://site.ru/style.css', function( css ) {
    $('<style>', {
        html: css
    }).appendTo( document.head || document.getElementsByTagName( 'head' )[0] );
});

Simplified vanilla Javascript可能如下所示：

var req;

try {
    req = new XMLHttpRequest();
} catch ( e ) {
    req = new ActiveXObject( 'Microsoft.XMLHTTP' ); // there are plenty more
} finally {
    req.onreadystatechange = function() {
        if( req.readyState === 4 ) {  // simplified/shortened
            var head          = document.head || document.getElementsByTagName('head')[0] || document.documentElement,
                lnk           = document.createElement('style');
                lnk.type      = 'text/css';
                lnk.textContent = lnk.text = req.responseText;

            head.insertBefore(lnk, head.firstChild);
        }
    };

    req.open('GET', 'http://site.ru/style.css', true);
    req.send(null);
}

如何在css样式上捕获onload事件？

1 个答案: