使用Chrome中的Greasemonkey/userscript单击页面上的按钮

Question

我将尽可能地在这里绝对冗长,因为我遇到了一些没有最终淘汰的解决方案.请记住,我不知道Javascript.我知道基本的HTML和CSS.我没有任何实际的编程背景,但我正在尝试通过研究这样的基本任务来逐步学习.请跟我说说我是个白痴.我在研究这个具体问题的过程中学到了这篇文章.我正在将此用户手写为个人项目,并与一些朋友分享.

我想做什么.

我正在尝试为Chrome/Greasemonkey编写用户脚本(Chrome是我的目标浏览器),它将点击Battlefield 3服务器浏览器上的" 刷新"按钮.对于那些不知道的人,"战地3"使用一个与VOIP浏览器插件配对的网站,并通过服务器浏览器实际启动游戏.它的大部分似乎是在表格中排列的相当直接的HTML.

我们的想法是,当查看已满服务器的主页面时,脚本将每隔三秒左右单击" 刷新"按钮,直到该页面报告服务器上的开放点,然后停止刷新循环并单击"加入服务器"按钮.我已经运行了脚本运行的部分,轮询服务器当前和最大的玩家然后将它们分配给他们自己的变量.

此时我正试图在控制台中点击一下工作,这样我就可以在脚本中使用它并且运气不好.

我试图操纵的代码.

这是我试图从Chrome开发工具中点击的按钮的div:

<div class="serverguide-header-refresh-button alternate show"> 
<div type="reset" class="common-button-medium-grey">
<p style="position: relative;">
<a href="/bf3/servers/show/c7088bdc-2806-4758-bf93-2106792b34d8/">Refresh </a>
</p>
</div>
</div>

(该链接不是静态的.它是指向特定服务器页面的链接)

我试过的.

要实际找到我正在使用的按钮getElementsByClassName.它没有唯一的ID,但该类对于此特定页面上的元素是唯一的,因此getElementsByClassName("serverguide-header-refresh-button")[0]每次都会拉出适当的div.它正在让脚本对按钮执行任何实际操作,这就是问题所在.

document.getElementsByClassName("serverguide-header-refresh-button")[0].click();

我现在意识到这不起作用,因为它不是传统的提交按钮.我不明白标准的具体细节,但我得知它不支持该.click()方法.

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() {
  unsafeWindow.jQuery('.serverguide-header-refresh-button')[0].click();
}

// load jQuery and execute the main function
addJQuery(main);

这只是unsafeWindow.jQuery('.serverguide-header-refresh-button').click();包含在一些代码中,用于为用户脚本加载jQuery.我有点在其他地方接过,但被告知只有在页面上加载jQuery时它才会起作用.我认为值得一试.这是其中一个我不知道我在黑暗中拍摄什么并且它不起作用.我尝试了下面的另一个jQuery代码片段:

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() {
   var evObj = document.createEvent('Events');
      evObj.initEvent("click", true, false);
      document.getElementsByClassName('serverguide-header-refresh-button')[0].dispatchEvent(evObj);
}

    // load jQuery and execute the main function
addJQuery(main);

这两个都在Chrome和Firebug控制台中返回Undefined.

那么,有人会非常友好地帮助我为此脚本创建一些代码来按下此页面上的"刷新"按钮吗？

Answer 1

笔记：

1. jQuery.click()无法可靠地处理最初未通过 jQuery 设置的单击事件。

2. 您需要创建正确类型的活动；createEvent('Events')不是这样的。

3. 正如 Jim Deville 指出的那样，链接伪按钮没有被选择。

4. 为此（到目前为止）您不需要 jQuery。

5. 确保为测试代码静态加载“刷新”控件，如问题所示。如果它是 AJAX 的，则单击尝试可能会过早触发。

将所有这些放在一起，以下代码应该可以工作。但请注意，某些网站（例如某些 Google 应用程序）使用时髦的状态敏感设计 - 这需要一系列事件。

var refreshBtn = document.querySelector (
    "div.serverguide-header-refresh-button div[type='reset'] a"
);
var clickEvent = document.createEvent ('MouseEvents');
clickEvent.initEvent ('click', true, true);
refreshBtn.dispatchEvent (clickEvent);