Вызов функции javascript после загрузки script
У меня есть html-страница, где я добавляю html динамически через javascript, как показано ниже
<script type="text/javascript" src="/myapp/htmlCode"></script>
Я хочу вызвать функцию js, например. loadedContent(); после добавления выше script динамического html.
Может кто-нибудь помочь мне, как я могу это сделать?
Ответы
Ответ 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!');
});
Ответ 2
У меня была та же проблема...
Мое решение (без jQuery):
<script onload="loadedContent();" src ="/myapp/myCode.js" ></script>
Ответ 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);
Ответ 4
Вы можете установить интервальный таймер, и как только скрипт загрузится, отмените таймер и сделайте что-нибудь.
var fileInterval = setInterval(function() {
if (functionInFile) {
// do something
clearInterval(fileInterval); // clear interval
}
}, 100); // check every 100ms
Ответ 5
на самом деле вы могли бы просто поместить loadedContent()
в качестве последней строки script, которую вы загружаете
(что является своего рода концепцией JSONP)
Ответ 6
В 2019 году, возможно, предпочтителен новый подход, если либо все ваши целевые браузеры поддерживают ES6, либо вы используете babel.
Ответ @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. вы можете сократить содержание Promise следующим образом:
script.onload = res;
script.onerror = rej;
Ответ 7
Отъезд head.js. Он достигнет того, что вам нужно, обеспечивая обратные вызовы, когда ваши файлы успешно загружены и выполнены.
Ответ 8
Мой ответ является расширением ответа 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 );