jQuery를 자바스크립트로 로드하고 jQuery를 사용합니다.

jQuery를 자바스크립트로 로드하고 jQuery를 사용합니다.

다음을 사용하여 도메인에 jQuery 라이브러리를 추가합니다.

 var script = document.createElement('script');
 script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
 script.type = 'text/javascript';
 document.getElementsByTagName('head')[0].appendChild(script);

그러나 실행할 때:

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

콘솔에서 다음 오류를 보고합니다.

Uncaught ReferenceError: jQuery is not defined

jQuery를 동적으로 로드하고 돔에 있으면 사용하려면 어떻게 해야 합니까?

JSFiddle은 사용자가 무엇을 찾고 있는지(요청을 잘못 이해하지 않은 경우를 제외하고) 정확하게 보여주는 작은 예시를 가지고 있습니다.http://jsfiddle.net/9N7Z2/188/

자바스크립트를 동적으로 로드하는 방법에는 몇 가지 문제가 있습니다.jQuery와 같은 기본 프레임워크의 경우, 실제로 정적으로 로드하고 싶을 수도 있습니다. 그렇지 않으면 전체 자바스크립트 로드 프레임워크를 작성해야 하기 때문입니다.

당신은 기존의 자바스크립트 로더를 사용할 수도 있고, 다음을 보고 당신의 것을 쓸 수도 있습니다.window.jQuery정의를 내릴 수 있습니다.

// Immediately-invoked function expression
(function() {
  // Load the script
  const script = document.createElement("script");
  script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js';
  script.type = 'text/javascript';
  script.addEventListener('load', () => {
    console.log(`jQuery ${$.fn.jquery} has been loaded successfully!`);
    // use jQuery below
  });
  document.head.appendChild(script);
})();

IE8처럼 정말 오래된 브라우저를 지원해야 한다면,load이벤트 핸들러가 실행되지 않습니다.그 경우에는, 당신은 투표를 통해 그 존재를 확인할 필요가 있습니다.window.jQuery반복적으로 사용하는window.setTimeout. 여기에 해당 메서드를 사용하는 JSFiddle이 있습니다. http://jsfiddle.net/9N7Z2/3/

당신이 해야 할 일을 이미 한 사람들이 많습니다.다음과 같은 기존 자바스크립트 로더 프레임워크를 확인해 보십시오.

• https://developers.google.com/loader/ (더 이상 문서화되지 않음)
• http://yepnopejs.com/ (deprec)
• http://requirejs.org/

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는 페이지가 다른 평가를 로드하지 못하도록 차단하므로 콜백 함수를 만들 필요가 없습니다.

엔코시아의 웹사이트는 다음을 추천합니다.

<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>

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가 이미 존재하는지 먼저 확인하려면 다음을 시도합니다.

이 오류가 발생하는 이유는 자바스크립트가 스크립트가 로드되기를 기다리고 있지 않기 때문에 실행할 때

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

스크립트가 준비되었다는 보장은 없습니다(절대로 없을 것입니다).

이것은 가장 우아한 해결책은 아니지만 실행 가능합니다.기본적으로 코드가 로드되면 jQuery 객체 ad가 함수를 실행하는지 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);

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>

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>

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가 로딩되었는지 확인하기를 참조하시기 바랍니다.

ES6 비동기 버전, 원하는 곳에서 기능으로 사용 가능(다이나믹 Import와 유사):

/**
 * @see https://stackoverflow.com/a/10113434
 */
function loadScript(cfg) {
  const {
    url,
    global: globalName
  } = cfg;
  return new Promise((r, j) => {
    // Load the script
    const script = document.createElement("script");
    script.type = 'text/javascript';
    script.onload = function () {
      r(globalName && window[globalName]);
    };
    script.onerror = function (err) {
      j(err);
    };
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
  });
}

사용 예:

const jQuery = await loadScript({
  url: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
  global: 'jQuery'
});

jQuery('body')

참고: 다음 항목이 있는 경우undefined, 아마도 당신은 정확한 정보를 제공하지 않았을 것입니다.global름.

언급URL : https://stackoverflow.com/questions/10113366/load-jquery-with-javascript-and-use-jquery