HTML中如何在动态加载script脚本的前后分别执行指定函数？

你原来通过jQueryhtml()方法插入script标签的写法无法监听脚本的加载状态，我们可以改用原生动态创建script元素的方式实现需求，不需要行内代码，也无需新增服务端文件：

// 脚本加载前执行前置逻辑
showSpinner();

// 创建script元素
const myScript = document.createElement('script');
myScript.src = 'foo.js';

// 监听脚本加载且执行完成事件
myScript.addEventListener('load', () => {
  hideSpinner();
});

// 可选：监听加载失败事件，避免spinner一直展示
myScript.addEventListener('error', () => {
  hideSpinner();
  // 可自定义加载失败的提示逻辑
});

// 插入DOM后才会正式发起脚本加载请求
document.body.appendChild(myScript);

如果你习惯使用jQuery，也可以用以下简化写法：

showSpinner();
$('<script>')
  .attr('src', 'foo.js')
  .on('load error', hideSpinner)
  .appendTo('body');

实现说明 #

• showSpinner()在脚本插入DOM之前执行，完全符合「加载前执行」的要求
• script元素的load事件触发时机就是脚本下载完成且执行完毕的时机，刚好对应后置执行hideSpinner()的需求
• 全程没有使用行内事件属性，也不需要对foo.js做任何修改，符合你的限制条件

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