Javascript 脚本加载后调用javascript函数

Call javascript function after script is loaded

提问by Neeraj

I have a html page where I am appending html at dynamically through a javascript like below

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

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

I want to call a js function e.g. loadedContent(); once the above script adds dynamic html.

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

Can someone help me how I can do that?

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

回答by Jaykesh Patel

you can achieve this without using head.js javascript.

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

回答by Didier68

I had the same problem... My solution (without jQuery) :

我有同样的问题......我的解决方案（没有jQuery）：

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

回答by socm_

try something like this

尝试这样的事情

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

回答by Cristian Traìna

In 2019, maybe a new approach is preferable if either all your target browsers support ES6 or you are using webpackto transpile your code into ES5.

在 2019 年，如果您的所有目标浏览器都支持 ES6，或者您正在使用webpack将您的代码转换为 ES5 ，那么也许一种新的方法更可取。

The answer of @JaykeshPatelis ok, but here is a more modern solution based on Promise:

@JaykeshPatel的答案是可以的，但这里有一个更现代的解决方案，基于Promise：

// 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:// .... /jquery.js')
  .then(() => {
    console.log('Script loaded!');
  })
  .catch(() => {
    console.error('Script loading failed :( ');
  });

PS. you can shorten the Promise content in this way:

附注。您可以通过这种方式缩短 Promise 内容：

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

回答by Marco Panichi

My answer is an extension of the Jaykesh Patel answer. I've implemented this code in order to load multiple javascript. Hope this helps someone:

我的答案是Jaykesh Patel 答案的延伸。我已实现此代码以加载多个 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 );

回答by David Fregoli

actually you could just put the loadedContent()as the last line of the script you're loading (which is kind of the concept behind JSONP)

实际上你可以把它loadedContent()作为你正在加载的脚本的最后一行（这是 JSONP 背后的概念）

回答by CherryFlavourPez

Check out head.js. It will achieve what you're after, providing callbacks when your file(s) have successfully loaded and executed.

查看head.js。它将实现您所追求的目标，在您的文件成功加载和执行时提供回调。

回答by Gaspar Junior

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