使用用户脚本将 jQuery 和 jQuery UI 插入标头

Question

我在尝试通过我正在处理的 Greasemonkey 用户脚本将 jQuery 和 jQuery UI 插入网页标题时遇到了麻烦。下面是我插入它的方式：

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 无法在页面上运行。

Answer 1

我相信您所需要的只是在插入需要 jQuery 的新代码之前稍等一下。

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

Answer 2

jquery 是否已在您尝试将其包含到的页面中定义。
你有没有尝试过

$.noConflict()

它是否在裸函数内

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

Answer 3

我有两种方法将 jQ 与我的用户脚本一起使用。第一个是将 jQ 添加到用户脚本中。

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 （检查源代码），我喜欢做的实际上是创建 2 个文件。一个 user.js（GM 脚本）将 a 注入到头部。第二个文件需要托管在某个地方（我使用保管箱），但这是所有培根所在的位置。您可以像编写页面代码而不是 GM 脚本一样编写 jQ。

例如

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.

});

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

Answer 4

我刚刚找到了解决这个问题的方法。它实际上确实与 jQuery 未正确加载有关，但其他解决方案都不适合我。 Joey Geralnik 建议这样做，效果正常：

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