用Greasemonkey脚本替换jQuery插件功能? [英] Greasemonkey script to replace jQuery plugin function?
问题描述
我正在尝试为Firefox写一个Greasemonkey脚本，以在某些页面检测到窗口聚焦不正确时改变它们的行为.我希望页面即使仍然处于活动状态也可以继续保持好像焦点一样的功能.
I'm trying to write a Greasemonkey script for Firefox to change the behavior of some pages when they detect a window out of focus. I want the page to continue to function as if it were still in focus, even when I have another tab or window active.
我开始查看似乎有效的 CAPS安全策略用于内联Javascript(window.onfocus，window.onblur)，但对外部jQuery脚本插件对焦点事件的访问没有影响.
I started out looking at CAPS Security Policies which seemed to work for inline Javascript (window.onfocus,window.onblur), but had no effect on external jQuery script plugin access to focus events.
这是我的测试页，它使用jQuery插件来检测焦点.该插件在此是内联的，但在某些情况下也可以是外部脚本.
This is my test page, which uses a jQuery plugin to detect focus. The plugin is inline here, but may also be an external script in some cases.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>jQuery focus test</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
$.fn.focuscheck = function() {
function focusOn () {
document.getElementById('console').innerHTML += '<div>Focus event handler fired.</div>';
};
function focusOff () {
document.getElementById('console').innerHTML += '<div>Blur event handler fired.</div>';
};
$(window).bind('focus', focusOn);
$(window).bind('blur', focusOff);
};
})(jQuery);
</script>
</head>
<body>
<div id="console"></div>
<script type="text/javascript">
$('#func').focuscheck();
</script>
</body>
</html>
还有我的Greasemonkey脚本.我正在尝试从joanpiedra.com改编jQuery Greasemonkey代码.在这种情况下，我试图从测试页中完全替换focuscheck jQuery插件功能代码.除了function focusOff()应该显示不同的结果以外，所有行都与原始行相同.我不知道是否有一种方法可以在不替换整个功能的情况下进行操作.如果可以的话，我可能只想将单个focusOff函数或该行替换为$(window).bind('blur', focusOff);.
And my Greasemonkey script. I'm trying to adapt jQuery Greasemonkey code from joanpiedra.com. In this case, I tried to completely replace the focuscheck jQuery plugin function code from my test page. All the lines are the same as the original except the function focusOff() which should display a different result. I don't know if there is a way to do this without replacing the entire function. If that's an option, I might just want to replace the single focusOff function or the line with $(window).bind('blur', focusOff);.
现在，Greasemonkey脚本在我的测试页上不起作用.输出没有变化.另外，我不确定是否需要将jQuery添加到我的Greasemonkey脚本中，因为该页面已经加载了它.
Right now, the Greasemonkey script doesn't work on my test page. There is no change in the output. Also, I'm not sure if I need to add jQuery to my Greasemonkey script or not, since the page already loads it.
// ==UserScript==
// @name jQuery
// @namespace http://www.joanpiedra.com/jquery/greasemonkey
// @description Play nicely with jQuery and Greasemonkey
// @author Joan Piedra
// @homepage http://www.joanpiedra.com/jquery/greasemonkey
// @include *
// ==/UserScript==
// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);
// Check if jQuery's loaded
function GM_wait() {
if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
else { $ = unsafeWindow.jQuery; letsJQuery(); }
}
GM_wait();
// All your GM code must be inside this function
function letsJQuery() {
var script = document.createElement('script');
script.type = "text/javascript";
script.innerHTML = "(function($){\
\
$.fn.focuscheck = function(){\
function focusOn () {\
document.getElementById('console').innerHTML += '<div>Focus event handler fired.</div>';\
};\
function focusOff () {\
document.getElementById('console').innerHTML += '<div>CHANGED event handler.</div>';\
};\
\
$(window).bind('focus', focusOn);\
$(window).bind('blur', focusOff);\
};\
})(jQuery);";
document.getElementsByTagName('head')[0].appendChild(script);
}
推荐答案
我不知道是否有一种方法可以不替换整个 功能
I don't know if there is a way to do this without replacing the entire function
是的，有.参见下面的代码.
Yes, there is. See code below.
此外，我不确定是否需要将jQuery添加到我的Greasemonkey脚本中 是否可以，因为页面已经加载了.
Also, I'm not sure if I need to add jQuery to my Greasemonkey script or not, since the page already loads it.
您不必这样做.参见下面的代码.
You don't have to. See code below.
HTML (与您的HTML相同-我刚刚在"innerHTML"中添加了从内联JS触发")
The html (same as yours - i just added "fired from inline JS" to innerHTML)
<html lang="en">
.
.
function focusOn () {
document.getElementById('console').innerHTML += '<div>Focus event handler fired from inline JS.</div>';
};
function focusOff () {
document.getElementById('console').innerHTML += '<div>Blur event handler fired from inline JS.</div>';
};
.
.
</html>
GM脚本
// ==UserScript==
// @name TESTE 2
// @namespace TESTE 2
// @description TESTE 2
// @include file:///*
// ==/UserScript==
$ = unsafeWindow.$
$(window).off('blur')
function focusOff () {
document.getElementById('console').innerHTML += '<div>Blur event handler fired from Greasemonkey.</div>';
};
$(window).on('blur', focusOff);
结果
在这里，为什么不应该使用unsafeWindow: http://wiki.greasespot.net/UnsafeWindow
And here, why you should not use unsafeWindow: http://wiki.greasespot.net/UnsafeWindow
编辑
关于评论中的问题
谢谢.那正是我想要的.我会调查 使用安全包装而不是unsafeWindow.如果您不介意 后续问题:幻灯片演示-我试图适应类似 代码以覆盖点击功能
$('.btn-slide').unbind('click')然后添加一个新功能，但是 不太有效.该事件已记录，但该按钮仍然 激活.$('.btn-slide').bind('click', function(event) { event.preventDefault(); console.log('button clicked'); });我该怎么办 防止幻灯片动画播放?
Thank you. That's exactly what I was looking for. I will look into using a safe wrapper instead of unsafeWindow. If you don't mind a follow-up question: Slide Panel demo - I tried to adapt similar code to override the click function, with
$('.btn-slide').unbind('click')then adding a new function, but it doesn't quite work. The event is logged, but the button still activates.$('.btn-slide').bind('click', function(event) { event.preventDefault(); console.log('button clicked'); });How can I prevent the slide animation?
新代码:
// ==UserScript==
// @name TESTE 3
// @namespace TESTE 3
// @description TESTE 3
// @include http://www.webdesignerwall.com/demo/jquery/*
// ==/UserScript==
$ = unsafeWindow.$
$(window).load(function(){
$('.btn-slide')
.unbind('click')
.bind('click', function(event) {
alert('my function here')
console.log('button clicked')
})
});
这篇关于用Greasemonkey脚本替换jQuery插件功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
