加载脚本后调用javascript函数

时间:2021-01-13 01:19:20

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?

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

6 个解决方案

#1


67  

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) {  //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 );
}


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

#2


7  

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

#3


4  

You could set an interval timer, and once the script is loaded, cancel the timer, and do something.

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

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

#4


4  

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

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

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

#5


3  

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背后的概念)

#6


1  

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

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

#1


67  

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) {  //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 );
}


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

#2


7  

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

#3


4  

You could set an interval timer, and once the script is loaded, cancel the timer, and do something.

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

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

#4


4  

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

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

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

#5


3  

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背后的概念)

#6


1  

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

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