동적으로 생성 된 JQuery 스크립트 태그로 스크립트가 실행되지 않습니다.

Question

외부 JS 파일 (예 : test.js)에 다음 코드가 있습니다. JQuery 소스가 아직 없다는 것을 발견하면 JQuery 소스를 가리키는 추가 스크립트 태그를 작성한다. 코드는 실제로 스크립트 태그를 생성하고 생성하는 실제 스크립트 앞에 삽입합니다.

if (typeof(jQuery) == "undefined") { 
var head = document.getElementsByTagName("head")[0]; 
// get any and all script tags 
var scripts = document.getElementsByTagName("script"); 
// the actual script call the actions (ie: this one "test.js") 
thisScript = scripts[scripts.length - 1]; 
// create element 
var script = document.createElement("script"); 
script.setAttribute("type", "text/javascript"); 
script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"); 
head.insertBefore(script,thisScript); 
} 

위의 코드는 정상적으로 작동합니다. 그러나, 내가 가지고있는 문제는 일단 JQuery 소스 스크립트 태그가 생성되면 "test.js"의 나머지 코드가 작동하지 않는다는 것입니다. 마치 코드가 JQuery 함수에 액세스 할 수없는 것처럼 (또는 JQuery가 있다는 것을 모르는 것처럼). 따라서

, "test.js"에 다음과 같은 코드가 작동하지 않습니다

$(document).ready(function() { 

// ... 

}); 

나는 FF (12) 방화 광에 따라지고있어 오류 것은 : 어떤 아이디어 "$가 정의되어 있지 않습니다" 왜 이런 일이 일어나거나 어떻게 해결할 수 있습니까?

참고 : 대상 페이지에 JQuery를 배치 할 수 있다는 것을 알고 있습니다. 그러나 그것은 옵션이 아닙니다. JQuery가 있는지 검색 할 수 있어야합니다. 그렇지 않다면 JQuery를 가리키는 스크립트 태그를 생성하고 Jquery 코드를 실행하십시오.

Answer 1

당신은 당신이 일을 수동으로 같은 스크립트 태그를 삽입하면, 해당 스크립트가 비동기 적으로로드됩니다. 즉, 페이지의 다른 부분은 해당 스크립트가로드 될 때까지 기다리지 않습니다.

이 경우 스크립트 태그가 페이지 소스에있는 경우와는 다르며이 경우 스크립트가 동 기적으로로드되고 페이지의 다른 부분은 스크립트가로드 될 때까지 실행되지 않기 때문입니다.

그 결과 동적으로 삽입 된 스크립트 태그가로드되고 구문 분석되어 실행되기 전에 나머지 페이지 자바 스크립트가 실행되고 있습니다. 따라서 jQuery를 설치하기 전에 jQuery를 사용하려고한다. 동 기적으로로드되는 뭔가

1. 변경하여 jQuery를 스크립트 태그의 삽입 :

   나는 당신의 문제를 해결하기위한 두 가지 옵션 중 알고 있어요. 내가 알고있는 유일한 방법은 document.write()을 사용하여 새 스크립트 태그를 문서에 쓰고 머리 부분에 삽입하지 않고 문서에 쓰는 것입니다. document.write()으로 문서에 추가 된 내용은 동 기적으로 처리됩니다.

2. 동적으로 스크립트를 삽입하고 있지만 모니터링 이벤트를 추가하면 스크립트가 성공적으로로드 된 시점을 알 수 있고 jQuery를 사용하는 초기화 코드 만 실행할 수 있습니다. 성공적으로로드되었습니다.

두 번째 옵션을 수행하는 스크립트 로딩 라이브러리 (예 : require.js)도 있습니다.

Answer 2

로드 순서에 문제가있는 것 같습니다. jQuery가 아직로드되지 않았으므로 '$ not defined'오류가 발생합니다. 그런 다음 jQuery를로드한다. 이것은 물론 첫 번째 스크립트를 다시로드하지 않으므로 오류가 발생합니다.

Answer 3

이 여기에 답을했습니다 Check if jQuery is included in Header (Joomla)

if (typeof jQuery == 'undefined') { 
    var head = document.getElementsByTagName("head")[0]; 
    script = document.createElement('script'); 
    script.id = 'jQuery'; 
    script.type = 'text/javascript'; 
    script.src = 'js/jquery.js'; 
    head.appendChild(script); 
}