1

假设我有以下代码：

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/

谢谢。

4

2 回答 2

2

我提出了一种完全不同的方法来解决这个问题，尽管我没有一个页面有足够的 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>
于 2013-10-28T17:20:18.287 回答
1

如果您只添加几个 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
    });
于 2013-10-28T17:17:36.763 回答