javascript - 在 Chrome 中使用 Greasemonkey/用户脚本点击页面上的按钮

Question

由于我遇到了一些最终没有成功的解决方案，因此我将在这里尽可能地冗长。请记住，我不懂 Javascript。我知道基本的 HTML 和 CSS。我没有任何实际的编程背景，但我正在尝试通过研究这样的基本任务来一点一点地学习。请像我是白痴一样跟我说话。我在这篇文章中抛出的任何行话都是我在研究这个特定问题时学到的。我正在将此用户脚本编写为个人项目并与一些 friend 分享。

我正在尝试做什么。

我正在尝试为 Chrome/Greasemonkey(Chrome 是我的目标浏览器)编写一个用户脚本，它将点击战地风云 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);