스크립트가 로드된 후 javascript 함수 호출

스크립트가 로드된 후 javascript 함수 호출

아래와 같이 자바스크립트를 통해 html을 동적으로 첨부하는 html 페이지가 있습니다.

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

js 함수 예를 들어 loadedContent()를 호출하고 싶습니다. 위 스크립트가 동적 html을 추가하면,

누가 어떻게 해야 하는지 도와줄 수 있나요?

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!'); 
});

만약 당신이 2021년에 이 게시물을 읽고 있다면 아마도 당신은 약속에 더 익숙할 것입니다.모든 대상 브라우저가 ES6를 지원하거나 폴리필(polyfill)을 사용하는 경우에는 보다 현대적인 접근 방식이 좋습니다.

이 솔루션은 @JaykeshPatel answer처럼 작동하지만, 기반은Promises:

// 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 $ = await loadScript(..)).

만약 어떤 논쟁도 통과시킬 생각이 없다면, 당신은 당신의 코드를 다음과 같이 줄이면 됩니다.

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

저도 똑같은 문제가 있었어요(jQuery가 없는) 내 솔루션:

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

이런식으로 해 보다

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

사실 당신은 그냥 그 안에loadedContent()로드 중인 스크립트의 마지막 줄로(JSONP 뒤에 있는 일종의 개념)

제 답변은 제이케시 파텔 답변의 확장입니다.저는 자바스크립트를 여러 개 로드하기 위해 이 코드를 구현했습니다.누군가에게 도움이 되기를 바랍니다.

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

필요한 건 이것뿐입니다.

await new Promise((resolve) => {
    let script = document.createElement("script");

    script.onload = () => {
        resolve();
    };

    script.src = "https://example.net/app.js";

    document.head.appendChild(script);
});

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

언급URL : https://stackoverflow.com/questions/14644558/call-javascript-function-after-script-is-loaded