Google AJAX Libraries APIを使用すると、ページにjQueryを挿入できません

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

質問

Google AJAX Libraries 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 Libraries APIに固有のようです。私の質問：

  • onload / onreadyの状態に関係なく、Google AJAX Libraries API / jQueryをページに挿入する方法はありますか？
役に立ちましたか？

解決

注入する場合は、おそらくグーグルローダーを使用せずにスクリプトをリクエストする方が簡単です：

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

承認されたソリューションの1つの問題は、ページで実行するすべてのコードをコールバック関数に強制的に配置することです。そのため、jQueryを必要とするもの（プラグインなど）は、その関数から呼び出す必要があります。また、jQueryを必要とする他のすべてのインクルードJSファイルは、他のすべてのスクリプトが起動する前にjQueryがロードされることに依存しています。

機能しました!!!!!アプリケーションのプレイグラウンドを見て、それを見つけました。...

jquery ....の使用を開始するラッパーは次のとおりです。機能にアラートを設定して、動作を確認します

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

function OnLoad(){
    $(function(){

    });
}

google.setOnLoadCallback(OnLoad);

任意のページにjquery（利用可能な最新の安定バージョン）を挿入するために、苦痛の少ないソリューションを使用できます。

jQuerify -jQueryの注入に使用されるChrome拡張機能（利用可能な最新の安定バージョン） ）任意のWebページに（HTTPSでも）<！> quot;

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top