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

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

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

Answer 3

尝试这样的事情

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

Answer 4

您可以设置间隔计时器，加载脚本后，取消计时器，然后执行某些操作。

var fileInterval = setInterval(function() {
    if (functionInFile) {
        // do something
        clearInterval(fileInterval); // clear interval
    }
}, 100); // check every 100ms

Answer 5

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

Answer 6

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

Answer 7

我的回答是Jaykesh Patel answer的扩展。我已经实现了此代码，以便加载多个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 );

Answer 8

在2019年，也许最好采用一种新方法。

@JaykeshPatel 的答案还可以，但是由于它是从2013年开始的，因此我提出了一种基于A的更现代的解决方案：

Answer 9

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

加载脚本后调用javascript函数

9 个答案: