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+"'/>")
]);

我不知道为什么会这样。

MS Edge Iframe CSS

MS Edge Iframe CSS

css

iframe

jquery

browser-extension

microsoft-edge