2013-07-30 5 views
0

<head> 태그의 첫 번째에 동적으로 js 파일을 추가하고 싶습니다. 내 파일은Javascript에서 하위로드를 먼저 추가하는 방법은 무엇입니까?

Examble 아래 링크를 주어집니다 : Link

코드

<!DOCTYPE html> 
<html> 
<head> 
     <script type="text/javascript"> 
     function load() { 
     var doc = document; 
     var url = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"; 
     var id = 1; 
     var script = doc.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = url; 
     script.id = id; 
     //alert(script); 
     var head = doc.getElementsByTagName("head")[ 0 ].appendChild(script); 

     } 
     window.onload = load; 

     </script> 
<title>Nathan</title> 
<style> 
table{ 
    width:200px; 
    margin:0 auto; 
    background-color:#eee; 
    text-align:center; 
    cursor:pointer; 
} 
th{ 
    background-color:#333; 
    color:#FFF; 
} 
div#lyrics{ 
    width:200px; 
    height:400px; 
    background-color:#7C8698; 
    position:absolute; 
    left:500px; 
    padding:10px; 

} 
</style> 
<script type="text/javascript"> 

$(document).ready(function(){ 

    $("div#lyrics").hide(); 

    $("#songlist tr").mouseover(function(){ 
     $(this).css("background-color","#ccc"); 
     $("#lyrics",this).show(); 
    }).mouseout(function(){ 
     $(this).css("background-color","#eee"); 
     $("#lyrics",this).hide(); 
    }); 

}); 
</script> 

</head> 

<body> 
    <table id="songlist"> 
     <th>Songs</th> 
     <tr><td>song1<div id="lyrics">la la la song1</div></td></tr> 
     <tr><td>song2<div id="lyrics">doo doo doo song2</div></td></tr> 
     <tr><td>song3<div id="lyrics">fee fi fo fum song3</div></td></tr> 
     <tr><td>song4<div id="lyrics">hmm hmmm song 4</div></td></tr> 
     <tr><td>song5<div id="lyrics">ma ma mi mi song5</div></td></tr> 
     </tr> 
    </table> 
</body> 
</html> 

동적 스크립트가 성공적으로 추가하지만 머리 태그의 마지막에 추가. 그래서 내 jquery 함수가 작동하지 않습니다. 그래서 내가 사용 .insertBefore()

+0

호기심에서 벗어나 이런 식으로하지 않고 '

0

head 태그 먼저 내 동적 스크립트를로드하고 .firstChild 대신 여전히 작동하지 않습니다 head 섹션에 첫 번째 jQuery를 추가 .appendChild()

+0

또는 "prependChild()"함수가있을 수 있지만 확실하지 않습니다. – Virus721

+0

나는 이미 이것을 시도하고있다. 하지만 내 jquery 기능이 작동하지 않습니다 –

+0

@ Virus721 아니, 그래서 이상한. – andlrc

0

코드를 작성 했으므로 두 번째 script 태그의 내용은 jQuery가로드되기 전에 실행됩니다. 그 당시 "$"는 정의되지 않았습니다.

window.onload = load; 

로드 기능의 내용을 "onload"에서 실행한다는 것을 의미합니다. 하지만 분명히 스크립트 태그의 내용이 이미 실행되고 있습니다. 정의 된 "로드"기능은 이미 정의 된 스크립트 태그의 모든 스크립트가 실행될 때까지 실행되지 않습니다.

그리고 실제로 파일을 다운로드하는 데 약간의 시간이 필요합니다.

jQuery를 비동기 적으로로드해야하는 경우 jQuery에 종속 된 모든 JavaScript를 jQuery가 성공적으로로드 된 후에 만 ​​실행되는 콜백에 넣어야합니다.

+0

@NULL은 콜백에 모든 jQuery 종속 JavaScript를 배치하는 방법을 보여주는 훌륭한 답을 만들었습니다. –