MS Edge iframe CSS

Question

我正在构建跨浏览器扩展，我正在使用 jQuery 在文档中创建 iframe：

$iframe = $("<iframe/>");

$iframe.on("load", function () {
    var font = browser.runtime.getURL("css/font.css");
    var style = browser.runtime.getURL("css/style.css");

    // on safari I use window.safari.extension.baseURI + path

    $iframe.contents().find("head").append([
        "<link href='"+font+"' rel='stylesheet' type='text/css'/>",
        "<link href='"+style+"' rel='stylesheet' type='text/css'/>",
    ]);
});

$iframe.appendTo("html");

这适用于浏览器：Chrome、Firefox、Safari、Opera，但不适用于 MS Edge。 iframe 被创建，内容被注入。但该样式并未应用于 iframe 内容。这只发生在 MS Edge 中。

可能出了什么问题？

Answer 1

经过深入研究，我发现 IE 和 MS Edge 动态样式表加载存在问题，在创建“link”元素时，应最后添加“href”属性。

但是经过多次不成功的尝试，我找到了适合我的解决方案（请注意，href 属性必须确实是最后一个）：

$iframe.contents().find("head").append([
    $("<link rel='stylesheet' type='text/css' href='"+font+"'/>"),
    $("<link rel='stylesheet' type='text/css' href='"+style+"'/>")
]);

我不知道为什么会这样。