可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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?

回答1:

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

回答2:

I found this post after we figured out a different solution. So for some reason, if you can't use the accepted solution, this one seem to work fine:

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

One issue with the accepted solution is that you're forced to put all your code that you want to run on the page into your callback function. So anything that needs jQuery (like plugins) need to be called from that function. AND, all your other included JS files that require jQuery are dependent upon jQuery being loaded BEFORE all the other scripts fire.

回答3:

I Got It Working!!!!! I figured it out by looking in the application playground....

Here is the wrapper to start using jquery.... Put an alert in the function to see it work

google.load("jquery", "1.4.2");  function OnLoad(){     $(function(){      }); }  google.setOnLoadCallback(OnLoad);

回答4:

You can use less painful solution to inject jquery (the lastest stable version available) to any page.

jQuerify - Chrome extension used to inject jQuery (the latest stable version available) into any web page (even HTTPS)"

文章来源: Injecting jQuery into a page fails when using Google AJAX Libraries API

标签

jquery

脚本