스크립트 태그에서 온로드 이벤트를 실행하려고 합니다.
일련의 스크립트를 순서대로 로드하려고 하는데 온로드 이벤트가 실행되지 않습니다.
var scripts = [
'//cdnjs.cloudflare.com/ajax/libs/less.js/1.3.3/less.min.js',
'//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js',
MK.host+'/templates/templates.js'
];
function loadScripts(scripts){
var script = scripts.shift();
var el = document.createElement('script');
el.src = script;
el.onload = function(script){
console.log(script + ' loaded!');
if (scripts.length) {
loadScripts(scripts);
}
else {
console.log('run app');
MK.init();
}
};
$body.append(el);
}
loadScripts(scripts);
요소를 DOM에 추가하기 위해 jQuery를 사용할 때 el.onload와 같은 네이티브 이벤트가 실행되지 않는 것 같습니다.네이티브를 사용하는 경우document.body.appendChild(el)그러면 예상대로 발사됩니다.
설정해야 합니다.src다음의 속성onload이벤트, f.ex:
el.onload = function() { //...
el.src = script;
또한 DOM에 스크립트를 추가해야 합니다.onload이벤트:
$body.append(el);
el.onload = function() { //...
el.src = script;
확인이 필요하다는 것을 기억하세요.readystateIE 지원용.jQuery를 사용하는 경우 다음을 사용할 수도 있습니다.getScript()방법: http://api.jquery.com/jQuery.getScript/
페이지에 jQuery가 이미 있는지 테스트하고 강제로 로드하지 않으면 함수를 실행하려고 시도하는 비슷한 문제에 직면했습니다.저는 @David Hellsing 해결책을 찾아봤지만, 제가 필요로 할 기회는 없었습니다.사실, 그.onload교육은 즉시 평가되었고, 그리고 나서.$아직 이 함수 내에서 사용할 수 없습니다(예, "$는 함수가 아닙니다." ^^).
그래서 저는 https://developer.mozilla.org/fr/docs/Web/Events/load 이라는 기사를 참조하여 이벤트 청취자를 제 스크립트 개체에 첨부했습니다.
var script = document.createElement('script');
script.type = "text/javascript";
script.addEventListener("load", function(event) {
console.log("script loaded :)");
onjqloaded(); // in fact, yourstuffscript() function
});
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
제가 필요로 하는 것은, 지금은 잘 작동합니다.이것이 다른 사람들에게 도움이 되기를 바랍니다 :)
스크립트를 순서대로 로드하는 작업 방법(예: 스크립트가 로드될 때까지 기다렸다가 다른 스크립트를 로드하는 등)
다음 스크립트가 html 페이지에 추가됩니다.
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", (event) => {
function fn(src) {
return new Promise(resolve => { // promise is initiated
const script = document.createElement("script"); // creates <script> tag
// script.async = true is not required since Promise is used
script.onload = resolve; // promise will resolve on load event
script.setAttribute("src", src); // will set srs="link to your source file here"
document.getElementsByTagName('body')[0].appendChild(script); // append the created <script> tag to <body>
});
}
const url = [ // order of script tags
"/script1.js",
"/script2.js",
"/script3.js"
];
Promise.resolve(fn(url[0])) // wait until url[0] is resolved, then
.then(() => fn(url[1])) // call and wait until url[1] is resolved, then
.then(() => fn(url[2])) // call url[2]
});
</script>
"() =>"를 사용하여 각 ".then"에 결과를 반환하는 것이 중요합니다. 이를 체인이라고 합니다.
항상 결과를 반환합니다. 그렇지 않으면 콜백이 이전 약속의 결과를 감지하지 못합니다(화살표 함수 사용, () => x는 () => {return x; }).
로드된 HTML 페이지의 결과:
<body>
<!-- your html -->
<script src="/script1.js"></script>
<script src="/script2.js"></script>
<script src="/script3.js"></script>
</body>
언급URL : https://stackoverflow.com/questions/16230886/trying-to-fire-the-onload-event-on-script-tag
'programing' 카테고리의 다른 글
| 하위 폴더로 폴더를 복사하는 방법은 무엇입니까? (0) | 2023.08.26 |
|---|---|
| Python을 사용하여 미니돔으로 요소 값 가져오기 (0) | 2023.08.26 |
| Get-ChildItem은 어떻게 결과가 없음(파일 0개)에 대해 테스트할 수 있습니까? (0) | 2023.08.26 |
| jquery 호버 이벤트 지연? (0) | 2023.08.26 |
| JQuery를 사용하여 Div에서 CSS 제거 (0) | 2023.08.26 |