无法从 XMLHttpRequest 触发点击答案

【问题标题】：Cannot trigger a click from XMLHttpRequest无法从 XMLHttpRequest 触发点击
【发布时间】：2013-02-08 08:55:15
【问题描述】：

我为此写了一篇类似的帖子，但由于过于本地化而被关闭。经过一番研究和测试，我想我找到了问题的根源，这个问题应该得到更好的解释，希望对你有帮助。

使用 XMLHttpRequest 我需要转到一个页面，模拟鼠标点击，然后获取一些内容。这是我写的代码：

var sendToLog;
var xhr = new XMLHttpRequest();
xhr.open('GET', '/newsfeed-simulator', true);
xhr.responseType = 'document';
xhr.onload = function(e) {
  if (this.status == 200) 
  {

    var event = xhr.response.createEvent("MouseEvents");
event.initMouseEvent("click", true, true, window,
            0, 0, 0, 0, 0,
            false, false, false, false,
            0, null);
xhr.response.getElementById("simulate-button").dispatchEvent(event);

    $(xhr.response).ready(function() 
    {
        console.log(xhr.response.body);
        sendToLog = xhr.response.getElementsByClassName("story-score");
    });

    chrome.extension.sendMessage({writeToLog: sendToLog});  

}
}

xhr.send();

问题是点击事件不起作用。也尝试过xhr.response.getElementById("simulate-button").click(); 无济于事。

不确定是什么问题？这应该是直截了当的事情：转到一个页面，等待它加载，单击一个按钮，等待它再次加载，然后从 DOM 获取内容。

任何帮助将不胜感激。

提前谢谢你

EDIT 删除了第二个 onload，并添加了 xhr.response。现在它在没有鼠标点击的情况下打印 DOM 到控制台。仍然不是我需要的，但也许这是朝着正确方向迈出的一步

EDIT2：根据this post 和其他人的说法，最好不要使用click，因为它只适用于IE。所以我编辑了我的代码，但直到没有工作......无赖

EDIT3 作为 Fabien Quatravaux，这里的问题是 ajax 请求响应没有加载到当前 DOM 中，所以我无法调用该事件（我可以但它不会做任何事情）。所以问题是我如何使用 xmlhttprequest，转到使用的页面，触发事件，然后获取生成的 DOM？再次感谢 Fabien 指出这一点。

【问题讨论】：

您是否尝试在 ajax 响应主体上触发事件，就好像它已加载到 DOM 中一样？如果我错了，请阻止我，但 ajax 请求响应未加载到当前 DOM 中，因此您无法在其上执行脚本，如果它已被解析为文档。看看XMLHttpRequest spec：第 5-4 点说“禁用脚本”；
哇，我认为您是正确的，感谢您澄清这一点！您知道是否有一种方法可以使用 xmlhttprequest 访问页面，触发事件然后获取生成的 DOM？我这样做的方式显然不是正确的。
我认为您没有找到正确的方向。您正在尝试使用您无法控制的代码（存在于您指向的此 html 页面上的 javascript），并且尚未编写为您想要的代码。相反，您应该弄清楚这个按钮（或事件）在做什么，然后做同样的事情。也许您要单击的按钮正在向服务器发送请求，也许它只是取消隐藏页面上已经存在的 HTML 节点，...查看该页面的事件处理程序代码并尝试执行相同操作（注意跨域问题）。

标签： javascript jquery ajax google-chrome-extension xmlhttprequest

【解决方案1】：

我认为 XmlHttpRequest 没有 response 属性。我认为您可能会使用 responseText 并操作 DOM（即添加一个按钮）——然后您可以单击该按钮并创建另一个 XmlHttpRequest。

编辑：

我的立场是正确的，我看到它确实有一个——我只是从来没有以这种方式使用过它。

我认为更大的问题是，假设您在响应中取回了一个文档并且您找到了一个按钮并引发了点击事件，那么应该发生什么。我认为您没有与点击事件相关联的任何内容。

我也同意其他帖子，您绝对应该使用 jQuery。好像您只是在尝试调用连续的 AJAX 请求，不是吗？

【讨论】：

模拟点击后，页面会添加一些元素（即DOM会发生变化）。其中一个元素是：<div class="story-score"> //some score </div>，我必须得到该分数并将其打印到控制台。我还是 javascript 的新手。这是我第一次用它编程，所以我还在学习东西，这就是我没有使用 AJAX 的原因。无论如何，是的，我试图调用两个 ajax：一个去页面，一个模拟鼠标点击。
@Shane - 我认为如果你是第一次学习 JavaScript - XHR（或 AJAX）请求可能会有点复杂。因此，您想在页面加载时执行 AJAX 请求，并在第一个 ajax 请求返回时执行第二个请求？我想我会将您返回到 ajax 请求的内容添加到调用页面的 DOM 中——然后您可以模拟按钮单击，并调用另一个 AJAX 请求。
也许我解释得不够清楚（如前所述，我对这一切还是陌生的）。我的 xhr 请求工作正常，我可以完美地模拟鼠标点击。问题是在模拟点击后我在 DOM 中找不到我需要的东西。也许在这里我需要添加对 DOM 的响应（如您所建议的），但我不知道该怎么做。或者也许我不需要这样做，问题是我在加载所有内容之前调用了我的函数（这就是我添加第二个 onload 的原因）。

【解决方案2】：

修改 xhr.response.getElementById("simulate-button").click();到 document.getElementById("simulate-button").click();

移除 $(xhr.response).ready 函数

修改 sendToLog = xhr.response.getElementsByClassName("story-score");到 sendToLog = document.getElementsByClassName("story-score");

【讨论】：

这不起作用。它只会在原始文档中查找“模拟按钮”并返回并出错，因为它找不到它。我想对从 XMLHttpRequest 获得的文档而不是原始文档执行所有这些操作。这就是 XHR 的全部原因。说了这么多，谢谢你的回答。如果您有任何想法，请不要犹豫发布它。 :)
这不是输入代码或回答问题的正确格式。

【解决方案3】：

作为 Fabien Quatravaux，这里的问题是 ajax 请求响应未加载到当前 DOM 中，所以我无法调用该事件。我通过打开一个新标签并直接转到该页面来解决了这个问题。这个解决方案的缺点是用户可以看到这个选项卡，但至少它可以工作。

感谢大家的帮助。

【讨论】：