如何等待附加到正文的 <script> 完成执行

Question

当用户单击按钮时，我需要将外部脚本附加到我的正文中。这是要求。菜鸟问题。假设外部库创建了一个 window.newLib 变量。当 newLib 变量可供我使用时，如何通知我？我尝试了这个，但 onload 没有被调用：  const script = document.createElement('script');  script.innerHTML = 'window.test = 1; console.log("test defined.");';  script.onload = "console.log('onload called.', window.test)"  script.async = false;  document.body.appendChild(script);这可行，但对我来说似乎很脏。有没有更好的办法？const injectScript = () => {  const script = document.createElement('script');  script.innerHTML = 'setTimeout(() => {window.test = 1},10500); console.log("test defined.");';  script.async = false;  document.body.appendChild(script);}const nap = ms => new Promise(res => setTimeout(res, ms));const maxAttempts = 100;const msNap = 100; // 10s timeoutconst start = async () => {  injectScript();  let id = 0;  while (true) {    if (++id === maxAttempts) {      throw(`Lib took too long to load: ${id * msNap}ms`);    }    if (window.test) break;    await nap(msNap);  }  console.log('External lib correctly loaded.');};start();

Answer 1

这似乎按预期工作：

const script = document.createElement('script');

script.src = 'data:text/html,id = 0;while(true){ if(++id==1000000) break;} window.test = 1; console.log("test defined.");';

script.onload = () => console.log('onload called.', window.test);

document.body.appendChild(script);

Answer 2

尝试这个：

const injectScript = () => {

        const script = document.createElement('script');

        script.innerHTML = 'console.log("Function loaded..."); window.postMessage({cmd:"loaded"});';

        script.async = false;

        document.body.appendChild(script);

        }

        setTimeout(injectScript, 3000);

        window.addEventListener('message', function(e){

            if(e.data.cmd === 'loaded'){

                console.log('external library loaded');

            }

        });