2

在我的用户脚本中，我使用这段代码来获取 jQuery 和我的其余代码注入并执行：

function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js");
  script.addEventListener('load', function() {
    var script = document.createElement("script");
    script.textContent = "(" + callback.toString() + ")();";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
}
function readyJQuery() {
  jQuery.noConflict();
  jQuery(document).ready(function() {
    //my rest code goes here
  })
}
addJQuery(readyJQuery)


这完美地工作。但是当我有两个脚本时，它们都注入了 jQuery 部分。脚本需要分开，因为我不知道谁想使用哪个脚本或两个脚本。

我可以阻止第二个脚本注入 jQuery 并使用第一个脚本中的那个吗？

当第二个脚本直接以：

function addJQuery(callback) {
  var script = document.createElement("script");
  script.textContent = "(" + callback.toString() + ")();";
  document.body.appendChild(script);
}
function readyJQuery() {
  jQuery.noConflict();
  jQuery(document).ready(function() {
    //my rest code goes here
  })
}
addJQuery(readyJQuery)

我在控制台中收到错误消息：jQuery is undefined。我如何测试一个不同的脚本是否已经注入了 jQuery，然后等到它准备好？

4

2 回答 2

1

给你的 jQuery 一个唯一的标识符，检查那个标识符，如果没有找到，只添加 jQuery。您还需要留出足够的时间来初始化第一个 jQuery。

在两个脚本中更改addJQuery()为以下内容在我的测试中有效：

function addJQuery (callback) {
    //--- Has jQuery already been added?
    var jqNode  = document.querySelector ("#myAddedJQ");
    if (jqNode) {
        FireCallback (callback);
    }
    else {
        //--- Wait a bit to be sure.
        setTimeout ( function() {
                var jqNode  = document.querySelector ("#myAddedJQ");
                if (jqNode) {
                    FireCallback (callback);
                }
                else {
                    var script  = document.createElement ("script");
                    script.id   = "myAddedJQ";
                    script.setAttribute (
                        "src",
                        "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
                    );
                    script.addEventListener ('load', function () {
                        FireCallback (callback);
                    }, false);
                    document.body.appendChild (script);
                }
            }
            , 444
        );
    }

    function FireCallback (callback) {
        var script          = document.createElement ("script");
        script.textContent  = "                                         \
            if (typeof waitForJqDefined == 'undefined') {               \
                var waitForJqDefined    = setInterval ( function () {   \
                        if (typeof jQuery != 'undefined') {             \
                            clearInterval (waitForJqDefined);           \
        ";
        script.textContent += "\n(" + callback.toString() + ")();\n";
        script.textContent += "                                         \
                        }                                               \
                    },                                                  \
                    50                                                  \
                );                                                      \
            }                                                           \
            else {                                                      \
        ";
        script.textContent += "\n(" + callback.toString() + ")();\n";
        script.textContent += "                                         \
            }                                                           \
        ";
        document.body.appendChild (script);
    }
}
于 2012-04-21T04:40:09.813 回答
0

在注入脚本以加载 jQuery 之前 - 为什么不检查它是否已经存在？

如果您担心竞争条件：两个脚本都试图同时加载它 - 您可以通过在全局范围内设置一个标志来缩小竞争条件并检查它。不会消除竞争条件，但可能会有所帮助。

if ( typeof jQueryLoading == 'undefined')
   var jQueryLoading = false;
if ( typeof jQuery == 'undefined' && jQueryLoading == false )
{
  jQueryLoading = true;
  //Load it yourself, then add scripts
}
else
{
  //No problems. Add your scripts
}
于 2012-04-21T04:30:05.123 回答