使用userscript在header中插入jQuery和jQuery UI

Inserting jQuery and jQuery UI into header with userscript

本文关键字：jQuery UI 插入 userscript header 使用      更新时间：2023-09-26

我一直有麻烦试图插入jQuery和jQuery UI到网页标题通过一个Greasemonkey userscript我正在工作。下面是我插入它的方法:

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的新代码之前稍作等待。

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

jquery是否已经在您试图包含它的页面中定义。

$.noConflict()

是否在裸函数中

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

我有两种方法在我的用户脚本中使用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(检查源代码)，我喜欢做的是创建2个文件。一个user.js (GM脚本)将a注入到头部。这第二个文件需要托管的地方(我使用dropbox)，但这是所有的培根位于。您可以编写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没有正确加载有关，但其他解决方案都不适合我。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);
}
相关文章：