如何通过JS函数向HTML head中注入含esmDefine的script标签

你之前的代码运行失败主要是三个问题：

• 赋值给脚本的内容误用了HTML实体"：这类转义字符只会在浏览器解析HTML源码的时候被转换为对应符号，通过JS的textContent、innerText属性写入的内容不会触发HTML实体解析，最终脚本执行时读到的是带"的非法JS语法，直接报错。
• 插入时机不对：如果定义esmDefine的厂商基础脚本还没加载完成就插入这段调用脚本，会直接抛出esmDefine is not defined的错误。
• 用innerHTML给script标签写内容是被浏览器安全策略限制的，插入的脚本不会被执行。

// 注入脚本的方法
const loadEsmComponent = () => {
  const scriptEl = document.createElement('script');
  // 直接写标准JS语法，不要做HTML转义
  scriptEl.textContent = `esmDefine([
    "https://website1.com/web1-component.js"
  ]);`;
  document.head.appendChild(scriptEl);
};

// 等esmDefine可用后再执行注入
if (window.esmDefine) {
  loadEsmComponent();
} else {
  // 若厂商基础脚本有提供就绪事件就监听对应事件，没有就用load事件兜底
  window.addEventListener('load', loadEsmComponent, { once: true });
}

• 写入脚本内容时直接写原生JS代码即可，不需要对引号、尖括号做HTML转义，只有直接写在HTML文件里的代码才需要这类转义。
• 必须保证这段注入逻辑的执行时机晚于esmDefine所在的基础脚本加载完成，否则会报未定义错误。
• 注入完成后打开开发者工具查看head节点，就能看到和你预期完全一致的内联脚本标签，脚本会正常执行。

内容的提问来源于stack exchange，提问作者Daptal Ms