Ajax 응답/JS 함수에서 CSS/Javascript를로드하는 방법 - 크로스 브라우저 방식

Question

나는 ajax 응답을로드 중이고 jQuery가 필요하다. 대기 시간 문제로 인해 페이지로드시 jQuery를로드 할 수 없습니다.

그래서이 아약스 호출이있을 때마다 javascipt/css를로드 할 수 있기를 원합니다. 이것에 관해 많은 기사를 읽었지만 모든 브라우저에서 아무 것도 작동하지 않습니다.

javascript 응답에이 링크/스크립트 태그를 넣은 다음 몇 시간 (300ms) 후에 출력에서 ​​javascript를 eval'ing했지만 Chrome에서 작동하지 않습니다 (어쩌면 일부 경쟁 조건).

function addJquery() { 
     var script = document.createElement("script"); 
     script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"); 
     script.setAttribute('type', 'text/javascript'); 
     script.addEventListener('load', function() { 
      var script = document.createElement("script"); 
      document.body.appendChild(script); 
     }, false); 
    document.body.appendChild(script); 
} 

이 파이어 폭스에서 작동하지만 크롬에서 작동하지 않습니다

나는이 시도했다. 내가 여기서 잘못하고있는 것이 확실하지 않습니다. 이 문제를 해결할 때 도움이 될만한 사람이 있습니까?

Answer 1

로드 이벤트가 발생한 후 jQuery를로드하면 페이지가 이미 렌더링되어 있기 때문에 대기 시간 문제가 발생하지 않습니다.

이미 발생했기 때문에로드 이벤트가 발생하지 않습니다. setInterval을 사용하여 jquery를 감지 한 다음 간격을 지우십시오.

window.addEventListener('load', function(){ 

    var script = document.createElement('script'); 
     script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'; 
    document.getElementsByTagName('head')[0].appendChild(script); 

    var inter = setInterval(function(){ 

     if(jQuery){ 
      clearInterval(inter); 

      //execute jQuery code here 
     } 

    },100); 

},false); 

또한 스크립트 요소에 유형을 더 이상 설정할 필요가 없습니다. 브라우저마다 브라우저가 자바 스크립트임을 알고 있습니다.

Answer 2

ajax 호출을 사용하여 jquery 파일을로드하십시오 (Make ajax async = false).