在 Edge 浏览器中动态注入 JavaScript 模块

Question

我在这里创建了一个小演示： https : //codepen.io/min-width/pen/LYVVLwK

但以防万一，它会及时丢失，这是来自该页面的 JavaScript（它正在构建一个具有“模块”类型的脚本标记并将其注入页面）：

let value = `<script type="module">
  let element = document.createElement("p");
  element.appendChild(document.createTextNode("The JavaScript executed."));
  document.querySelector("body").appendChild(element);
</scr` + `ipt>`;
let compiled =
    document.createRange().createContextualFragment(value),
    body = document.querySelector('body');
body.appendChild(compiled);

工作时，它应该在页面正文中显示“执行的 JavaScript”。 这在大多数浏览器中都可以正常工作（我承认它在 IE 中不起作用，因为 IE 根本不支持模块）。

我的问题是这在 Edge 中不起作用，即使 Edge 确实支持 JavaScript 模块： https : //caniuse.com/#feat=es6-module

当模块被动态注入时，Edge 似乎并不喜欢。 是否有一些客户端解决方法？ 我目前在用户代理中使用服务器端检查“Edge”（在这种情况下，我立即在 HTML 中呈现模块而不是使用 JavaScript 注入它），但这并不是最佳解决方案。

如果您想知道，我的用例是我预加载一些 JavaScript 模块，然后在用户第一次与页面交互时将它们注入页面（PageSpeed Insights 似乎喜欢页面速度优化）。

编辑：既然有人问了，这里是 Edge 版本号信息（来自设置）：

它显示了 Edge 44 和 EdgeHTML 18。

Answer 1

我试图修改你的代码，它适用于 MS Edge 44 版本。

 <!DOCTYPE html> <html> <head> <title>Demo page</title> </head> <body> <script> let se =document.createElement('script'); se.setAttribute('type', 'module'); se.innerHTML='var para = document.createElement("P"); para.appendChild (document.createTextNode("The JavaScript executed.")); document.querySelector("body").appendChild(para);'; let body = document.querySelector('body'); body.append(se); </script> </body> </html>

Edge浏览器输出：

在 Edge 浏览器中动态注入 JavaScript 模块

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-02-11 03:45:07

在 Edge 浏览器中动态注入 JavaScript 模块

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-02-11 03:45:07

解决方案1
1 已采纳 2020-02-11 03:45:07