通过JavaScript向HTML插入JS代码：为何onerror直接alert有效、调用函数无效？

这个问题我之前做动态内容注入时也踩过坑，核心原因主要和动态脚本的执行时机、作用域绑定或者浏览器安全策略有关，咱们一步步拆解：

1. 最常见的坑：动态脚本执行时机滞后 #

当你通过JS动态插入<script>和<img>标签时，很容易出现顺序问题：

• 如果你先插入<img>标签，再插入<script>标签，那么<img>加载失败触发onerror时，<script>里的callAlert函数还没被浏览器解析执行——浏览器还没来得及读取这段脚本并把函数注册到全局，自然找不到这个函数，调用就失败了。
• 而直接写alert('test')时，alert是浏览器内置的全局函数，不管什么时候调用都存在，所以能正常触发弹窗。

验证这个问题的方法很简单：确保脚本执行完成后再插入图片，比如监听<script>的load事件：

// 先创建并插入脚本，等脚本执行完再插入图片
const scriptTag = document.createElement('script');
scriptTag.textContent = `function callAlert(){ alert('test'); }`;
scriptTag.onload = () => {
  const imgTag = document.createElement('img');
  imgTag.src = 'xxx';
  imgTag.onerror = () => callAlert();
  document.body.appendChild(imgTag);
};
document.body.appendChild(scriptTag);

2. 函数没挂载到全局作用域 #

如果你的动态脚本里用了let/const定义函数（而不是function声明），或者脚本的执行上下文被限制了，那callAlert可能没有被挂载到window全局对象上：

// 错误示例：const定义的函数不会自动成为全局变量
const scriptTag = document.createElement('script');
scriptTag.textContent = `const callAlert = () => { alert('test'); }`;
document.body.appendChild(scriptTag);

内联事件处理函数（比如onerror="callAlert()"）的执行作用域是全局的，找不到局部作用域里的函数。解决方法是手动把函数绑定到window上：

const scriptTag = document.createElement('script');
scriptTag.textContent = `window.callAlert = function(){ alert('test'); }`;
document.body.appendChild(scriptTag);

3. 浏览器CSP安全策略限制 #

如果页面设置了严格的Content Security Policy（CSP）规则，可能会禁止内联事件处理函数调用自定义函数，但允许调用内置函数（比如alert）。这种情况下，你需要改用事件监听的方式绑定错误事件，而不是用内联属性：

// 插入脚本后，用addEventListener绑定事件
const imgTag = document.createElement('img');
imgTag.src = 'xxx';
imgTag.addEventListener('error', callAlert);
document.body.appendChild(imgTag);

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