Question

我们说我有以下代码：

var style = $("<style/>")
    .html("body{background:grey; color:white;} /*and more CSS style*/")
    .on("load", function () {
        console.log("The New style injection has finished to load!");
    });
$("head").append(style);

在Chrome，Safari和Firefox浏览器上，load事件按时触发并完美运行，与预期完全一样但是在Internet Explorer（任何版本）上它根本不会触发load事件！

为什么它不适用于IE？
IE的解决方案是什么（如果有的话）？

可以在此处找到适用于除IE以外的所有浏览器的示例： http://jsfiddle.net/KWHyZ/2/

感谢。

Answer 1

我提出了一种完全解决这个问题的方法，尽管我没有足够的css页面来测试它。

而不是等待加载事件被触发，这似乎没有发生 - 为什么不默认隐藏内容，只使用添加的css使其可见？

也就是说，以下内容在Chrome中的控制台上提供了警报和消息，但它从未在IE中触发过。但是，由于（预先存在的）css出现在<body>标记之前，因此在动态添加的css加载之前，页面仍为“空白”。

<强> JS

window.addEventListener('load', mInit, false);

function onStyleLoaded()
{
    var mStr = "The New style injection has finished to load!";
    console.log(mStr);
    alert(mStr);
}

function mInit()
{
    var style = newEl('style');
    style.addEventListener('load', onStyleLoaded, false);
    style.innerHTML = ".styleMe{font-weight: bold; color: red;} body{visibility:visible;}";
    document.head.appendChild(style);
}

<强> CSS

body
{
    visibility: hidden;
}

<强> HTML

<body>
    <div class='styleMe'>Style this stuff!</div>
</body>

Answer 2

如果您只添加几个CSS规则 - 单独执行：

$('body').css({background:'#000', color:'#fff'});
$('#element').css({color:'#000', textDecoration:'underline'});
//etc...

如果您要添加一堆内容，请创建样式表并将其动态加载到页面上：

$('<link/>')
    .attr('href','http://example.com/urltostylesheet.css')
    .attr('rel','stylesheet')
    .attr('type','text/css')
    .appendTo($('head'))
    .on('load',function() {
        // do stuff
    });

如何用IE浏览STYLE标签上的“加载”事件？

2 个答案: