加载脚本后调用javascript函数

我有一个html页面，通过下面的javascript动态添加html

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

我想调用一个js函数，例如loadedContent（）；一旦上面的脚本添加了动态html

---

有人能帮我怎么做吗？

退房。它将实现您的目标，在成功加载和执行文件时提供回调。

实际上，您可以将

loadedContent（）

作为正在加载的脚本的最后一行

---

（这是JSONP背后的一种概念）

试试这样的方法

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

---

您可以在不使用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!'); 
});

函数加载脚本（url，回调）{
var script=document.createElement（“脚本”）
script.type=“text/javascript”；
如果（script.readyState）{//只对IE需要我也有同样的问题。。。
我的解决方案（没有jQuery）：

我的答案是的扩展。我实现此代码是为了加载多个javascript。希望这对某人有所帮助：

// RECURSIVE LOAD SCRIPTS
function load_scripts( urls, final_callback, index=0 )
{
    if( typeof urls[index+1] === "undefined" )
    {
        load_script( urls[index], final_callback );
    }
    else
    {
        load_script( urls[index], function() {
            load_scripts( urls, final_callback, index+1 );
        } );
    }
}

// LOAD SCRIPT
function load_script( url, callback )
{
    var script = document.createElement( "script" );
    script.type = "text/javascript";
    if(script.readyState) // IE
    {
        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 );
    debug("javascript included: "+url);
}

// EXAMPLE  
var main = function()
{
    console.log("main function executed");
}
var js = [ "path/to/script-1", "path/to/script-2", "path/to/script-3" ];
load_scripts( js, main );

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

此解决方案类似于@JaykeshPatel answer，但它基于
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$=wait loadScript（..）
）

如果您不想传递任何参数，可以将代码缩短如下：

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

仅供参考：
onload
对于IE版本9和更高版本是可以的-因此现在只需设置
onload
对于大多数人来说可能是可以的。注意
onload
将在脚本“加载”时启动回调不是在它实际完成执行时，这是disappointing@MaDude您可以参考任何关于此的文档吗？脚本尚未完成执行时，可能无法调用
onload
处理程序，因为Javascript是单线程的。这意味着只能在sc之前调用
onload
处理程序ipt start的执行或在它完成执行后。我个人从未见过前一种情况发生……从未见过。如果有人知道在脚本开始执行之前可以调用
onload
处理程序的可复制情况，请告诉我们。加载脚本数组的简单扩展：
function loadScripts（URL，回调）{var counter=0 for（var i=0；i
script.onLoad=res；
/）simplify@Kunukn还有一个较短的返回新承诺（res=>script.onload=res）
。但是将函数分配给
onload
更容易阅读，并且允许您在解析时传递参数。请注意：这与严格的CSP不兼容。@Bradley确定吗？我想添加
nonce=“${nonce}”
应该可以使它工作（未测试的猜测）.@guettli-Nope，很遗憾，您无法取消内联事件处理程序。只有元素内容是“不可存储的”，因此，如果您尝试将OPs属性与严格的CSP一起使用，则执行将失败。
script.onload = res;
script.onerror = rej;

  $.getScript("your script",function () {
      "your action";
  });