나는 아래와 같은 자바 스크립트를 통해 동적으로 html을 추가하는 html 페이지가 있습니다.
<script type="text/javascript" src="/myapp/htmlCode"></script>
js 함수를 호출하고 싶습니다. eg 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!');
});
답변
나는 같은 문제가 있었다 … 내 솔루션 (jQuery없이) :
<script onload="loadedContent();" src ="/myapp/myCode.js" ></script>
답변
2020 년에이 게시물을 읽고 있다면 아마도 약속에 더 익숙 할 것입니다. 모든 대상 브라우저가 ES6를 지원하거나 폴리 필을 사용하는 경우보다 현대적인 접근 방식이 바람직합니다.
이 솔루션은 @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://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;
답변
이렇게 해봐
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의 개념입니다).
답변
내 대답은 Jaykesh Patel 대답 의 확장입니다 . 여러 자바 스크립트 를로드하기 위해이 코드를 구현했습니다 . 이것이 누군가에게 도움이되기를 바랍니다.
// 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 );
