[JQUERY] 자바 스크립트 및 사용 jQuery를 함께 jQuery를로드

자바 스크립트 및 사용 jQuery를 함께 jQuery를로드

해결법

1. ---

   1.여기 작은 예제와 함께 작업 JSFiddle (나는 귀하의 요청을 오해하지 않는 한) 당신이 찾고있는 정확하게 보여주는,있다 : http://jsfiddle.net/9N7Z2/188/

   여기 작은 예제와 함께 작업 JSFiddle (나는 귀하의 요청을 오해하지 않는 한) 당신이 찾고있는 정확하게 보여주는,있다 : http://jsfiddle.net/9N7Z2/188/

   동적 로딩 자바 스크립트의 방법으로 몇 가지 문제가 있습니다. 그것은 매우 기초 프레임 워크에 관해서, jQuery를 같이, 당신은 실제로 아마 그렇지 않으면, 당신은 전체 자바 스크립트로드 프레임 워크를 작성해야하기 때문에, 정적을로드 할 ...

   당신은 기존의 자바 스크립트 로더의 일부를 사용하거나 정의 얻을 window.jQuery에 대한 보면서 자신을 작성할 수 있습니다.

   // Immediately-invoked function expression
   (function() {
       // Load the script
       var script = document.createElement("SCRIPT");
       script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
       script.type = 'text/javascript';
       script.onload = function() {
           var $ = window.jQuery;
           // Use $ here...
       };
       document.getElementsByTagName("head")[0].appendChild(script);
   })();
   

   그냥 당신이 IE8 같은 정말 오래된 브라우저를 지원해야하는 경우,로드 이벤트 핸들러가 실행되지 않는 것을 기억하십시오. 이 경우에는 반복 window.setTimeout을 사용 window.jQuery의 실존에 대한 여론 조사를해야합니다. 그 방법으로 작업 JSFiddle가 여기에 있습니다 : http://jsfiddle.net/9N7Z2/3/

   이미 당신이해야 할 일을했을 사람들이 많이 있습니다. 같은 기존의 자바 스크립트 로더 프레임 워크의 일부를 체크 아웃 :

2. ---

   2.동적으로 jQuery를 (소스)을로드 할 수있는 다른 방법이있다. 당신은 또한 사용할 수 있습니다

   동적으로 jQuery를 (소스)을로드 할 수있는 다른 방법이있다. 당신은 또한 사용할 수 있습니다

   document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>');
   

   그것은 사용 document.write를 나쁜 사례로 간주,하지만이 완료 그것의 좋은을 위해 그것을 언급 할 수 있습니다.

   왜 document.write를 "나쁜 연습"으로 간주됩니다 참조하십시오? 이유로. 프로 그래서 콜백 함수를 만들 필요가 없습니다, 다른 assests로드에서 페이지를 차단 않습니다 document.write를합니다.

3. ---

   3.Encosia의 웹 사이트는 권장합니다 :

   Encosia의 웹 사이트는 권장합니다 :

   <script type="text/javascript" 
           src="http://www.google.com/jsapi"></script>
   <script type="text/javascript">
     // You may specify partial version numbers, such as "1" or "1.3",
     //  with the same result. Doing so will automatically load the 
     //  latest version matching that partial revision pattern 
     //  (e.g. 1.3 would load 1.3.2 today and 1 would load 1.7.2).
     google.load("jquery", "1.7.2");
   
     google.setOnLoadCallback(function() {
       // Place init code here instead of $(document).ready()
     });
   </script>
   

   그러나 심지어 그는 단지는 최적의 성능에 관해서는 다음을 수행 비교하지 않음을 인정한다 :

       <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
       <script type="text/javascript"> window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js">\x3C/script>')</script>
       <script type="text/javascript" src="scripts.js"></scripts>
   </body>
   </html>
   

4. ---

   4.당신은 jQuery를 완성로드 한 후 코드를 실행해야

   당신은 jQuery를 완성로드 한 후 코드를 실행해야

   var script = document.createElement('script'); 
   document.head.appendChild(script);    
   script.type = 'text/javascript';
   script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
   script.onload = function(){
       // your jQuery code here
   } 
   

   당신이 비동기 함수를 실행하는 경우 또는 당신은 위의 코드에 await를 사용할 수 있습니다

   var script = document.createElement('script'); 
   document.head.appendChild(script);    
   script.type = 'text/javascript';
   script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
   await script.onload
   // your jQuery code here
   

   당신이 jQuery를 이미 페이지에 있는지 먼저 확인하려면이 시도

5. ---

   5.이 오류가 발생하는 이유는 실행할 때 자바 스크립트가 스크립트를로드 할 기다리고, 그렇게되지 않는 것입니다

   이 오류가 발생하는 이유는 실행할 때 자바 스크립트가 스크립트를로드 할 기다리고, 그렇게되지 않는 것입니다

   jQuery(document).ready(function(){...
   

   이 보증은 스크립트가 준비가되어 있지 (그리고 수 없습니다 않음).

   이것은 가장 우아한 해결책하지만 실행할 수 없습니다. 그 거기에 코드를로드 할 때 기본적으로 당신은 실행 기능을 jQuery 오브젝트 광고의 1 초를 확인할 수 있습니다. 잘 무기한 발생 수표를 정지로 나는 (그 20 번 실행 된 후에 사항 clearTimeout 말) 시간 제한을 추가합니다.

   var jQueryIsReady = function(){
       //Your JQuery code here
   }
   
   var checkJquery = function(){
       if(typeof jQuery === "undefined"){
           return false;
       }else{
           clearTimeout(interval);
           jQueryIsReady();
       }
   }
   var interval = setInterval(checkJquery,1000);
   

6. ---

   6.require.js를 사용하면 안전한 방법으로 같은 일을 할 수 있습니다. 당신은 JQuery와에 대한 종속성을 정의하고 다음이 네임 스페이스를 오염없이로드 종속성을 사용하여 원하는 코드를 실행할 수 있습니다 :

   require.js를 사용하면 안전한 방법으로 같은 일을 할 수 있습니다. 당신은 JQuery와에 대한 종속성을 정의하고 다음이 네임 스페이스를 오염없이로드 종속성을 사용하여 원하는 코드를 실행할 수 있습니다 :

   나는 일반적으로 자바 스크립트의 모든 종속성을 관리하기 위해이 라이브러리를 권장합니다. 그것은 간단하고 자원 로딩을 효율적으로 최적화 할 수 있습니다. 그러나 당신이 JQuery와 함께 사용 할 때 수행해야 할 수있는 몇 가지주의 사항이있다. 그들과 거래를하는 내가 가장 좋아하는 방법은 다음 코드 샘플에서이 github의의의 repo에서 설명하고 반영된다 :

   <title>jQuery+RequireJS Sample Page</title>
      <script src="scripts/require.js"></script>
      <script>
      require({
          baseUrl: 'scripts',
          paths: {
              jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min'
          },
          priority: ['jquery']
       }, ['main']);
       </script>
   

7. ---

   7.HTML :

   HTML :

   <html>
     <head>
   
     </head>
     <body>
   
       <div id='status'>jQuery is not loaded yet.</div>
       <input type='button' value='Click here to load it.' onclick='load()' />
   
     </body>
   </html>   
   

   스크립트:

      <script>
   
           load = function() {
             load.getScript("jquery-1.7.2.js");
             load.tryReady(0); // We will write this function later. It's responsible for waiting until jQuery loads before using it.
           }
   
           // dynamically load any javascript file.
           load.getScript = function(filename) {
             var script = document.createElement('script')
             script.setAttribute("type","text/javascript")
             script.setAttribute("src", filename)
             if (typeof script!="undefined")
             document.getElementsByTagName("head")[0].appendChild(script)
           }
   
           </script>
   

8. ---

   8.DevTools로의 콘솔에서 실행할 수 있습니다 :

   DevTools로의 콘솔에서 실행할 수 있습니다 :

   document.getElementsByTagName("head")[0].innerHTML += '<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"><\/script>';
   

   https://code.jquery.com/jquery/에서 사용할 수있는 jQuery를 버전을 확인합니다.

   이 장전 여부를 확인하려면 다음을 참조하십시오 JQuery와는 자바 스크립트를 사용하여로드 된 경우 확인.

from https://stackoverflow.com/questions/10113366/load-jquery-with-javascript-and-use-jquery by cc-by-sa and MIT license