在前端开发中，我们常常需要通过向远程资源加载脚本来实现一些功能。但是，由于资源的异步加载，我们很难在加载完毕之前直接执行一些操作。为了解决这个问题，我们可以向远程SRC注入一个脚本标记，并等待它执行，在执行完成后再进行下一步操作。
如何注入脚本标记
在 HTML 中，我们可以通过在 head 或 body 标签内添加 script 标签来加载脚本文件。但是，如果我们需要加载来自其他域名或跨域的资源，就需要使用动态创建 script 标签的方式进行加载。
const script = document.createElement('script');
script.src = 'https://example.com/your-script.js';
document.body.appendChild(script);上述代码会动态创建一个 script 标签，并将其 src 属性设置为你要加载的脚本文件的 URL。然后，将该标签添加到页面的 body 元素中。
如何等待脚本执行完成
当我们注入远程脚本标记后，如何判断它已经执行完成呢？有几种方法可以实现这个目的。
方案一：使用 onload 事件
在动态创建 script 标签时，我们可以监听其 onload 事件。当脚本加载完成后，该事件会被触发，我们可以在事件处理函数中执行下一步操作。
const script = document.createElement('script');
script.src = 'https://example.com/your-script.js';
script.onload = function() {
console.log('脚本加载完成！');
// 在这里执行下一步操作
}
document.body.appendChild(script);方案二：使用 Promise
我们可以封装一个返回 Promise 的函数，在该函数中创建 script 标签，并返回一个 Promise 对象。当 onload 事件触发时，我们将 resolve 函数调用，表示脚本已经加载完成。
-- -------------------- ---- -------
-------- --------------- -
------ --- ----------------- ------- -- -
----- ------ - ---------------------------------
---------- - ----
------------- - --------
-------------- - -------
----------------------------------
---
-
------------------------------------------------
-------- -- -
-----------------------
-- ----------
--
--------- -- -
-------------------------
---总结
通过向远程SRC注入一个脚本标记并等待它执行，我们可以在动态加载远程脚本时更灵活地控制其执行流程。无论是监听 onload 事件还是使用 Promise，都可以在远程脚本加载完成后进行下一步操作。
虽然在实际开发中，我们可能会遇到更复杂的情况，但是以上两种方案已经足够覆盖大部分场景。在实际开发中，我们可以根据具体情况选择合适的方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24371