javascript - 在边缘浏览器中动态注入 JavaScript 模块

问题描述

我在这里创建了一个小演示：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 44 和 EdgeHTML 18。

标签： javascriptmicrosoft-edge

我试图修改您的代码，它适用于 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 浏览器中输出：

javascript - 在边缘浏览器中动态注入 JavaScript 模块

问题描述

解决方案

推荐阅读