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

Question

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

但以防万一丢失，这里是该页面的 JavaScript（它正在构建类型为 "module" 的脚本标记并将其注入页面）：

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);

工作时，页面正文中应该写"The JavaScript executed"。这在大多数浏览器中都可以正常工作（我承认它在 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 模块

Dynamically Inject JavaScript Modules in Edge Browser

javascript

microsoft-edge