jquery - 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，注入(inject)内容。但该样式未应用于 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+"'/>")
]);

我不知道为什么会这样。