1

使用 Greasemonkey (v.1.8) 和 jQuery(2.0) 和 Firefox(20.0) 我想为页面上的每首乐曲添加按钮，例如Through the Night。
我尝试了几种添加按钮的方法。它们出现，但单击它们没有效果。此代码省略了一些函数以使其专注于问题。

// ==UserScript==
// @name                BBC Radio 3 Through the Night
// @namespace           Zahphod.beeblebrox
// @description         BBC Radio 3 Through the Night
// @include             http://www.bbc.co.uk/programmes/*
// @require             http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js
// @require             https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant               GM_log
// @version             0.0.01
// ==/UserScript==

(function(){

var artist;

// wait to "show more"
waitForKeyElements ("#synopsis div.copy a.show-more-truncate", clickShowMoreLink, true);

function clickShowMoreLink (jNode) {
    var clickEvent = document.createEvent('MouseEvents');
    clickEvent.initEvent ("click", true, true);
    jNode[0].dispatchEvent (clickEvent);
}

// skip if not a Through the Night playlist
   if ((!document.title) || (document.title.indexOf("Through the Night") < 0)) return;

$("div.full_synopsis>div>p:gt(0)").each(function() {
    artist = $(this).get(0).childNodes[2].textContent.replace(/^\n/, "");

//  var new_button = $("<button>Query " + artist + "</button>");
    var new_button = XPCNativeWrapper.unwrap($("<button>Query " + artist + "</button>"));

    $(this).append(new_button);
    $(new_button).click(function(){ alert(artist);});       

});

})();

建议表示赞赏。

4

2 回答 2

1

这不是激活您添加的大量按钮的好方法。而且，该特定站点以几种不常见的方式阻止了该代码。

有几个问题：

$(new_button).click(function(){ alert(artist);});
  1. new_button已经是一个 jQuery 对象。你会使用new_button.click(...除了其他问题。
  2. 尝试以这种方式将事件处理程序添加到创建的节点也容易受到范围/沙盒错误的影响——就像在这种情况下发生的那样。
  3. artist不会是你想的那样。您至少需要关闭。
  4. 这个特定的网站覆盖alert()！因此，无论如何您都不会看到该消息。无论如何，调试alert()都是一种糟糕的做法。学会爱上Firebug的控制台并使用console.日志功能系列。

  5. 不要创建大量不同click（或其他）的处理程序，每个按钮一个！这会阻塞内存，使事情陷入困境，并使调试变得更加困难。

    jQuery.on()非常适合这一点。


该代码的其他问题：

  1. (function(){ ... ... })();Greasemonkey/Tampermonkey/Scriptish 中不需要构造。
  2. $(this).get(0), 在一个.each()循环内, 归结为this.
  3. 始终为您添加的节点提供它们自己的类和/或 ID 是明智的。这有助于操作和不可避免的造型。（使用 CSS 规则进行样式设置，通过GM_addStyle().）
  4. 该页面显然重写了您添加按钮的 HTML。这会破坏添加不当的事件处理程序。使用.on().


将它们放在一起，将最后一段代码更改为：

$("div.full_synopsis>div>p:gt(0)").each ( function () {
    var artist = this.childNodes[2].textContent.replace(/^\n/, "");

    $(this).append (
        '<button class="gmArtistQryBtn" data-artist="' + artist
        + '">Query ' + artist + '</button>'
    );
} );

$("div.full_synopsis").on (
    "click",
    "button.gmArtistQryBtn",
    function (zEvent) {
        var artist = $(zEvent.target).data ("artist") || "OOPSIE!";
        console.log ("artist: ", artist);
    }
);


注意我们如何传递艺术家数据。这种方法可以在浅层 HTML 克隆中幸存下来——页面可能正在这样做。

于 2013-04-29T05:51:07.273 回答
0

按钮由 Greasemonkey 下的 XPCNativeWrapper 包装。

尝试https://developer.mozilla.org/en/docs/XPCNativeWrapper中描述的 XPCNativeWrapper.unwrap

于 2013-04-29T02:57:27.040 回答