Не удается вставить jQuery на страницу при использовании API библиотек Google AJAX - PullRequest
4 голосов
/ 08 мая 2009

Я бы хотел внедрить jQuery на страницу с помощью API библиотек Google AJAX. Я нашел следующее решение:

http://my -domain.com / инъекционные-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)

Ошибка, по-видимому, связана с API библиотек Google AJAX, поскольку я видел, как другие используют букмарклет jQuery для внедрения jQuery на текущую страницу. Мой вопрос:

  • Существует ли способ внедрения API библиотек Google AJAX / jQuery на страницу независимо от состояния onload / onready?

Ответы [ 4 ]

14 голосов
/ 08 мая 2009

Если вы делаете инъекцию, вероятно, проще запросить скрипт без использования загрузчика 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 );
})()
2 голосов
/ 23 мая 2009

Я нашел этот пост после того, как мы нашли другое решение. Так что по какой-то причине, если вы не можете использовать принятое решение, похоже, это работает нормально:

<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 (например, плагины), должно вызываться из этой функции. И все остальные включенные вами JS-файлы, для которых требуется jQuery, зависят от загрузки jQuery ДО запуска всех остальных сценариев.

1 голос
/ 25 октября 2012

Вы можете использовать менее болезненное решение для внедрения jquery (самой последней стабильной версии из доступных) на любую страницу.

jQuerify - расширение Chrome, используемое для внедрения jQuery (последней доступной стабильной версии) в любую веб-страницу (даже HTTPS) "

1 голос
/ 18 мая 2010

Я получил работу !!!!! Я понял это, посмотрев на игровую площадку приложения ....

Вот оболочка для начала использования jquery .... Поместите предупреждение в функцию, чтобы увидеть, как она работает

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

function OnLoad(){
    $(function(){

    });
}

google.setOnLoadCallback(OnLoad);
...