加载脚本后调用javascript函数

Question

我有一个html页面,我通过下面的JavaScript动态地附加html

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

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

有人可以帮助我如何做到这一点？

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!'); 
});

Answer 2

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

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

// 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;

Answer 3

我有同样的问题...我的解决方案(没有jQuery):

<script onload="loadedContent();" src ="/myapp/myCode.js"  ></script>

Answer 4

尝试这样的事情

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

if(script.readyState) {  //IE
script.onreadystatechange = function() {
  if ( script.readyState === "loaded" || script.readyState === "complete" ) {
    script.onreadystatechange = null;
    alert(jQuery);
  }
};
 } else{//others
script.onload = function() {
  alert(jQuery); 
}
}
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"
document.documentElement.appendChild(script);