加载脚本后调用javascript函数

Question

我有一个 html 页面，我在其中通过如下所示的 javascript 动态附加 html

 <script type="text/javascript" src="/myapp/htmlCode"></script>

我想调用一个 js 函数，例如 loadedContent();一旦上面的脚本添加了动态 html。

有人可以帮我怎么做吗？

原文由 Neeraj 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以在不使用 head.js javascript 的情况下实现这一点。

 function loadScript( url, callback ) {
  var script = document.createElement( "script" )
  script.type = "text/javascript";
  if(script.readyState) {  // only required for IE <9
    script.onreadystatechange = function() {
      if ( script.readyState === "loaded" || script.readyState === "complete" ) {
        script.onreadystatechange = null;
        callback();
      }
    };
  } else {  //Others
    script.onload = function() {
      callback();
    };
  }

  script.src = url;
  document.getElementsByTagName( "head" )[0].appendChild( script );
}

// call the function...
loadScript(pathtoscript, function() {
  alert('script ready!');
});

原文由 Jaykesh Patel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您在 2021 年阅读这篇文章，您可能更习惯 Promises。如果您所有的目标浏览器都支持 ES6 或者您正在使用 polyfill，则更现代的方法是可取的。

此解决方案的工作方式类似于 @JaykeshPatel 的回答，但它基于 Promise s：

 // definition
function loadScript(scriptUrl) {
  const script = document.createElement('script');
  script.src = scriptUrl;
  document.body.appendChild(script);

  return new Promise((res, rej) => {
    script.onload = function() {
      res();
    }
    script.onerror = function () {
      rej();
    }
  });
}

// use
loadScript('http://your-cdn/jquery.js')
  .then(() => {
    console.log('Script loaded!');
  })
  .catch(() => {
    console.error('Script loading failed! Handle this error');
  });

您可以在 res 回调的参数中传递一些上下文变量，或者如果您的库导入了一些全局符号，您可以在那里引用它。

例如，由于 jQuery 引入了 $ 全局符号，您可以调用 res($) 并为其创建一个本地作用域（如果您使用的是 TypeScript 并且不想声明一个每个文件中的模块变量，这样你就可以写 const $ = await loadScript(..) )。

如果你不想传递任何参数，你可以像这样缩短你的代码：

 script.onload = res;
script.onerror = rej;

原文由 Christian Vincenzo Traina 发布，翻译遵循 CC BY-SA 4.0 许可协议