javascript - 如何使用 Greasemonkey 修改现有按钮的 onclick 以打开新选项卡？

Question

我在页面上有一堆按钮，我想在新选项卡中打开它们，因为我正在拨号，并且我讨厌必须点击后退按钮并等待页面再次加载才能单击下一个按钮。

按钮代码如下所示:

<button onclick="window.location.href='?act=stock&amp;i=273';return false;" class="wide">Stock in Shop</button>

<button onclick="window.location.href='?act=stock&amp;i=287';return false;" class="wide">Stock in Shop</button>

<button onclick="window.location.href='?act=stock&amp;i=193';return false;" class="wide">Stock in Shop</button>

我想我需要将 window.location.href 更改为 window.open() 并将 URL 以 http://www 开头。 felisfire.com/possessions？ 然后添加原始 onclick 中的 href 部分...但我不知道如何解决这个问题，并且搜索 3 个小时的答案并没有帮助...

拜托!我如何使用 Greasemonkey 更改这些按钮？

到目前为止可能的代码，但我认为它不起作用:

var buttons = document.getElementsByClassName('wide');
for (var i = 0; i < buttons.length; i++) {
  buttons[i]=button.onclick="window.open('http://www.felisfire.com/possessions + *how do I get the part I need from the original onclick?*');">Stock in Shop</button>

}

Answer 1

在用户脚本中使用 onclick 时要小心；查看 Greasemonkey 的陷阱。

使用 jQuery 或 querySelectorAll 获取按钮，然后使用 jQuery 或 addEventListener 设置新的点击处理程序。

以下代码从旧的 onclick 中提取关键位，将其存储在数据属性中，并用 Web 2.0 处理程序替换 onclick:

var stockBtns   = document.querySelectorAll ("button.wide[onclick*='window']");

for (var J = stockBtns.length - 1;  J >= 0;  --J) {
    var oldClick    = stockBtns[J].getAttribute ("onclick");
    var payloadMtch = oldClick.match (/(act=.+?)';return/);
    if (payloadMtch  &&  payloadMtch.length > 1) {
        var payload = payloadMtch[1];
        //-- Don't use onclick!
        stockBtns[J].removeAttribute ("onclick");
        //-- Store payload value.
        stockBtns[J].setAttribute ("data-destQry", payload);

        //-- Activate click the proper way, especially for userscripts
        stockBtns[J].addEventListener ("click", openNewTab, false);
    }
}

function openNewTab (zEvent) {
    var baseURL     = "http://www.felisfire.com/possessions"
    /* Or be smart and use:
    var baseURL     = location.protocol + "//"
                    + location.host
                    + location.pathname
                    ;
    */
    window.open (baseURL + "?" + zEvent.target.getAttribute ("data-destQry") );
    return false;
}