如何将minified JS脚本添加到DOM中执行，解决直接插入报语法错误问题

问题核心原因 #

你遇到的语法错误本质上和向DOM插入script标签的逻辑无关，错误发生在浏览器解析你外层的JS代码阶段，还没运行到创建script、插入节点的步骤。
你使用反引号（）作为模板字符串的界定符来存储minified的JS代码，但这类压缩后的代码通常会保留源码中用到的反引号、${}模板插值语法。当代码中出现和外层界定符一致的反引号时，会直接被浏览器判定为模板字符串的结束标记，后续的代码内容全部变成非法语法，触发Invalid or unexpected token`报错。
而你通过src属性引入JS文件时，浏览器会单独请求、解析对应JS文件的内容，不会和你当前页面的JS代码产生语法冲突，所以可以正常运行。

可行解决方案 #

方案1：转义硬编码的minified代码（仅适用于代码固定的场景） #

如果你一定要把minified代码硬编码在当前脚本中，需要提前对压缩代码做全量转义：

• 如果你继续用反引号作为字符串界定符：把压缩代码中所有的反引号转义为\` ，所有的${转义为\${
• 如果你换成单引号/双引号作为字符串界定符：把压缩代码中所有对应引号转义为\'/\"，所有换行转义为\n

方案2：使用Blob+Object URL加载（更推荐，无转义成本） #

如果你的压缩代码是从接口/其他无语法冲突的渠道获取的纯文本，推荐用这种方式加载，完全规避字符串解析冲突：

// minifiedCode为你拿到的压缩代码纯文本，不需要额外转义
const minifiedCode = '你的html2canvas压缩代码内容';
const blob = new Blob([minifiedCode], { type: 'application/javascript' });
const script = document.createElement('script');
script.src = URL.createObjectURL(blob);
// 脚本加载完成后释放内存，避免内存泄漏
script.onload = () => URL.revokeObjectURL(script.src);
document.head.appendChild(script);

方案3：直接插入文本（适配低版本浏览器） #

如果不需要兼容非常旧的浏览器，拿到纯文本的压缩代码后直接赋值给script标签的textContent属性即可，不需要try-catch做兼容：

const minifiedCode = '你的html2canvas压缩代码内容';
const script = document.createElement('script');
script.textContent = minifiedCode;
document.head.appendChild(script);

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