Javascript 使用userscript将jQuery和jQuery UI插入到头中

我一直很难通过正在使用的Greasemonkey用户脚本将jQuery和jQueryUI插入到网页标题中。下面是我插入它的方式：

var ccst1 = document.createElement("script");
ccst1.id = "ccst1";
ccst1.src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
ccst1.type = "text/javascript";
document.head.appendChild(ccst1);
var ccst2 = document.createElement("script");
ccst2.id = "ccst2";
ccst2.src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js";
ccst2.type = "text/javascript";
document.head.appendChild(ccst2);

---

实际的插入过程是有效的，但是当我插入它时，在页面上使用jQuery（例如在html onclick中）是有效的，但是jQuery UI在插入后立即给我一个“$未定义”错误和一个“jQuery未定义”错误。然后页面上就没有jQuery UI了。

您试图将jQuery包含到的页面中是否已经定义了jQuery。 你试过了吗

$.noConflict()

它在一个裸函数中吗

(function(){ alert($("#hello"));  })();

---

我相信您需要的只是在插入需要jQuery的新代码之前的一小段等待

function jQueryReady() {
  if (typeof unsafeWindow.$ == 'undefined') {
    setTimeout(jQueryReady, 100);
  } else {
    loadJQueryUI(); //this is your function or code that depends on jQuery
  }
}

---

我刚刚找到了解决办法。这实际上与jQuery没有正确加载有关，但其他解决方案都不适合我。乔伊·杰拉尔尼克提出了这样一个建议，这个建议很有效：

var ccst1 = document.createElement("script");
ccst1.id = "ccst1";
ccst1.src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
ccst1.type = "text/javascript";
document.body.appendChild(ccst1);
function ccst2func() {
    var ccst2 = document.createElement("script");
    ccst2.id = "ccst2";
    ccst2.src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js";
    ccst2.type = "text/javascript";
    document.body.appendChild(ccst2);
    ccst2.addEventListener("load", ccst4func, true);
}
ccst1.addEventListener("load", ccst2func, true);

document.body.insertBefore(concealerPanel, document.body.firstChild);

function ccst4func() {
    var ccst4 = document.createElement("script");
    ccst4.id = "ccst4";
    ccst4.type = "text/javascript";
    ccst4.innerHTML = "$('#ccpanelmassiveconstruct').draggable({'handle': '#ccpmchandle', 'constrain': 'parent', 'distance': 20, 'cursor': 'move', 'grid': [10,10], 'scroll': true});\n$('#iframeDragger').resizable();\n$('#ccpmctabs').tabs();";
    document.body.appendChild(ccst4);
}

---

我有两种方法可以在我的用户脚本中使用jQ。第一个是将jQ添加到userscript中

function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.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);
}

// the guts of this userscript
function main() {
    $(document).ready( function() {
          // YOUR GM CODE GOES HERE

    });
}

// load jQuery and execute the main function
addJQuery(main);

这是可行的，但是事件可能会变得棘手。我喜欢做的是，如果页面已经在使用jQ（checksource），那么实际上是创建2个文件。一个user.js（GM脚本）将一个。第二个文件需要托管在某个地方（我使用dropbox），但这就是您所有的bacon所在的位置。您可以编写jQ，就好像您正在为页面而不是GM脚本编写代码一样

乙二醇

GM.user.js

// ==UserScript==
// @name            Name (jQuery)
// @description             description
// @namespace               my twitter page
// @author          me
// @include         http://         
// ==/UserScript==

var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'http://dl.dropbox.com/u/example.js';
head.appendChild(script);

example.js

$(document).ready( function() {
     // MY Awesome code here.

});

---

无论您选择哪种方法，祝您好运，玩得开心。

jQuery还没有出现在我试图将其包含到的页面中。我还没有尝试过$.noConflict（）（我不确定它是如何工作的，我不想弄乱jQuery UI），我可以在现有javascript中放置一个标记吗？或者你的意思是“我的代码在一个裸函数中吗”？在这种情况下，答案是：我的代码没有生成错误——firebug将错误归因于jQueryUI源代码中的标记。+1是个好主意——我已经环顾了很多地方，从未见过这样的建议。但不幸的是，什么也没有发生，这意味着“$”总是未定义的。但是我手动添加到页面上的jQuery（w/firebug）仍然有效！我一点也不明白。@BenjaminHarris你确定吗？这对我来说似乎很管用。您是否记得实际调用

jQueryReady（）

函数？在我称之为

loadJQueryUI（）

的部分中，你想做什么？你的答案绝对是最接近的。谢谢你让我走上正轨！