Google Ajax 라이브러리 API를 사용할 때 jQuery를 페이지에 주입하면 실패합니다.

StackOverflow https://stackoverflow.com/questions/840240

문제

Google Ajax 라이브러리 API를 사용하여 jQuery를 페이지에 주입하고 싶습니다. 다음 솔루션을 제시하고 싶습니다.

http://my-domain.com/inject-jquery.js:

;((function(){

  // Call this function once jQuery is available
  var func = function() {
    jQuery("body").prepend('<div>jQuery Rocks!</div>');
  };

  // Detect if page is already using jQuery
  if (!window.jQuery) {
    var done = false;
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement("script");
    script.src = "http://www.google.com/jsapi";
    script.onload = script.onreadystatechange = function(){

      // Once Google AJAX Libraries API is loaded ...
      if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {

        done = true;

        // ... load jQuery ...
        window.google.load("jquery", "1", {callback:function(){

          jQuery.noConflict();

          // ... jQuery available, fire function.
          func();
        }});

        // Prevent IE memory leaking
        script.onload = script.onreadystatechange = null;
        head.removeChild(script);
      }
    }

    // Load Google AJAX Libraries API
    head.appendChild(script);

  // Page already using jQuery, fire function
  } else {
    func();
  }
})());

그런 다음 스크립트가 별도의 도메인의 페이지에 포함됩니다.

http://some-other-domain.com/page.html:

<html>
  <head>
    <title>This is my page</title>
  </head>
  <body>
    <h1>This is my page.</h1>
    <script src="http://my-domain.com/inject-jquery.js"></script>
  </body>
</html>

Firefox 3에서는 다음과 같은 오류가 발생합니다.

Module: 'jquery' must be loaded before DOM onLoad! jsapi (line 16)

다른 사람들이 jQuery 북마크를 사용하여 현재 페이지에 jQuery를 주입하는 것을 보았 기 때문에 오류는 Google Ajax 라이브러리 API에만 해당됩니다. 내 질문:

  • Onload / Onready 상태에 관계없이 Google Ajax 라이브러리 API / JQuery를 페이지에 주입하는 방법이 있습니까?
도움이 되었습니까?

해결책

주입하는 경우 Google 로더를 사용하지 않고 스크립트를 요청하는 것이 더 쉽습니다.

(function() {
    var script = document.createElement("script");
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";
    script.onload = script.onreadystatechange = function(){ /* your callback here */ };
    document.body.appendChild( script );
})()

다른 팁

다른 해결책을 찾은 후이 게시물을 찾았습니다. 따라서 어떤 이유로 든 허용 된 솔루션을 사용할 수 없다면이 솔루션은 잘 작동하는 것 같습니다.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    if (typeof jQuery == 'undefined') {
        // jQuery hasn't been loaded... so let's write it into the head immediately.
        document.write('<script type="text/javascript" src="/jquery-1.3.2.min.js"><\/script>')
        }
</script>

허용 된 솔루션의 한 가지 문제는 페이지에서 실행하려는 모든 코드를 콜백 기능에 넣어야한다는 것입니다. 따라서 jQuery (플러그인과 같은)가 필요한 것은 해당 기능에서 호출해야합니다. 그리고 jQuery가 필요한 다른 모든 포함 된 JS 파일은 다른 모든 스크립트가 발사되기 전에 jQuery가로드되는 것에 의존합니다.

나는 그것을 작동시켰다 !!!!! 응용 프로그램 놀이터를 보면서 알아 냈습니다 ....

jQuery를 사용하기 시작하는 래퍼는 다음과 같습니다.

google.load("jquery", "1.4.2");

function OnLoad(){
    $(function(){

    });
}

google.setOnLoadCallback(OnLoad);

덜 고통스러운 솔루션을 사용하여 모든 페이지에 jQuery (가장 마지막 안정 버전)를 주입 할 수 있습니다.

jquerify - jQuery (최신 안정 버전)를 모든 웹 페이지 (HTTPS)에 주입하는 데 사용되는 Chrome Extension "

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top