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 を含むページがありません。

load イベントが発生するのを待つのではなく、発生しないように見えますが、デフォルトでコンテンツを非表示にし、追加された 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 ルールを 2 つだけ追加する場合は、個別に追加します。

$('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 に答える