2013-07-28 4 views
1

이 스크립트는 script.js에 저장을 고려해 즉시 jQuery를로드 할 때 기본 HTML 페이지 같은 그런

if ((typeof window.jQuery) == "undefined") { 
    var js = document.createElement("script"); 
    var he = document.getElementsByTagName('head')[0]; 
    js.type = "text/javascript"; 
    js.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"; 
    he.appendChild(js); 
} 


$('document').ready(function(){ 
    alert('testing'); 
}); 

:

<html> 
    <head> 
    </head> 
    <body> 
    </body> 
</html> 

<script src=script.js></script> 

이 결과에서 오류 :

ReferenceError: $ is not defined
script.js
Line 8

왜 $가 정의되어 있지 않습니까? 먼저 코드를 if, 그 다음 코드 ready() 사이에 넣습니다. 이 함수는 문서가 올바르게로드 될 때 호출되도록 콜백 함수에 코드를 대기시킵니다.

파이어 버그의 코드를 보면 jQuery가 제대로로드 된 것입니다. document.read 이후에 발생합니까? 또는 내가 여기에서 놓쳤던 무엇인가 다른 것이냐?

+1

귀하의 스크립트 태그가 문서의 _outside_입니다. 닫는'body' 태그 앞에 넣으십시오. – elclanrs

+0

HTML5 상용구가 어떻게 작동하는지 확인하십시오. 어쩌면 복잡하게 만들 수도 있습니다 : https://github.com/h5bp/html5-boilerplate/blob/master/index.html. 아니면 당신이하려는 일을 이해하지 못했습니까? – elclanrs

+1

jQuery를 비동기 적으로로드하고있다. – Musa

답변

2

이러한 방식으로 스크립트를로드해야한다고 주장하는 경우 실제로 사용할 준비가되었을 때 알려주도록 브라우저에 요청하십시오.

if (typeof jQuery !== "function") { 
    var js = document.createElement("script"); 
    var he = document.getElementsByTagName('head')[0]; 
    js.type = "text/javascript"; 
    js.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"; 
    he.appendChild(js); 

    js.addEventListener("load", function() { 
     alert(typeof $); // function 
    }); 
} 

alert(typeof $); // undefined 

사이드 노트 : 그것은 엄격하게 유형을 확인하는 것이 좋습니다. window.jQuery이 객체, 숫자 또는 문자열 인 경우 코드가 그다지 좋지 않아야합니다.