Home/ Questions/Q 219829
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T18:52:53+00:00

I’d like to inject jQuery into a page using the Google AJAX Libraries API,

  • 0

I’d like to inject jQuery into a page using the Google AJAX Libraries API, I’ve come up with the following solution:

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();
  }
})());

The script would then be included in a page on a separate domain:

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>

In Firefox 3 I get the following error:

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

The error appears to be specific to the Google AJAX Libraries API, as I’ve seen others use a jQuery bookmarklet to inject jQuery into the current page. My question:

  • Is there a method for injecting the Google AJAX Libraries API / jQuery into a page regardless of the onload/onready state?
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you’re injecting, it’s probably easier to request the script without using the google loader:

    (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 );
})()
    • 0