PhantomJs点击链接或在页面上运行函数

Question

我刚开始接触PhantomJs，目前为止它真的很酷。

我正在尝试爬取一个网站，并获取有关该网站上产品的数据。每个产品页面都会加载默认颜色的产品。当您单击颜色样本时，它会通过运行函数来交换新颜色。每个可点击的颜色样本元素看起来像这样：

<input type="image" id="swatch_0" onclick="pPage.getColor(0);" src="http://www.site.com/img50067.jpg">

getColor更新该颜色的缩略图和价格。id递增用于每个可用的颜色（swatch_0，swatch_1等），传递给getColor的参数也递增。我想通过PhantomJs遍历每种颜色并提取相应的数据。

我已经加载了页面、加载了jQuery，并可以获取初始加载的颜色的数据，但似乎没有任何方法允许我执行点击事件。

以下是我的尝试：

page.evalaute(function){
  var selection = $('#confirmText').text(); // name of the color
  var price = $('#priceText').text();       // price for that color

  console.log('Price is: ' + price);
  console.log('Selection is: ' + selection);
  console.log($('#swatch_1'));

  $('#swatch_1').trigger("click");

  selection = $('#selectionConfirmText').text();
  price = $('#priceText').text();
  console.log('Price is: ' + price);
  console.log('Selection is: ' + selection);

}

这让我感到：

console> Price is: $19.95
console> Selection is: blue
console> [Object Object]
console> TypeError: 'undefined' is not and object  // repeating until I manually exit

没有其他代码运行。我也尝试过像这样不使用jQuery触发事件：

var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
var cb = document.getElementById("swatch_1"); 
cb.dispatchEvent(evt);

直接运行该函数：

pPage.getColor(1);

我也得到了相同的输出。非常感谢您的帮助。

- Jeff Ryan

Answer 1

如果onclick处理程序直接在HTML中指定，您可以使用JavaScript直接调用它：

$(function() {
    $('#swatch_0')[0].onclick(); 
});

我相信你也可以使用PhantomJS的page方法sendEvent()来触发一个本地的点击事件。但是这看起来有点复杂，因为你必须从PhantomJS上下文中调用它，并提供鼠标的x、y位置。未经测试的代码如下：

var elementOffset = page.evaluate(function() {
   return $('#swatch_1').offset(); 
});
page.sendEvent('click', elementOffset.left + 1, elementOffset.top + 1);

- nrabinowitz

---

你确定onClick是jQuery事件吗？我找不到相关文档。我的理解是，.click()会将事件绑定到元素上，但仍需要点击它才能触发。我还没有尝试过sendEvent。看起来很有前途。对于这个特定的项目，我决定采用不同的方法。我正在使用iMacros来抓取页面数据。它使用实际的浏览器，因此Ajax和Javascript都不是问题。谢谢！ - Jeff Ryan

onclick 不是 jQuery 事件 - 它是 DOM 元素上的本地方法（这就是为什么我的示例使用 $(...)[0].onclick - [0] 获取实际的 DOM 元素，而不是 jQuery 对象）。这在许多情况下都不起作用，但当 onclick 包含在 HTML 标记中时，它确实起作用。 - nrabinowitz

顺便提一下 - 对于这种基于浏览器的爬取，您可能还应该考虑使用Selenium。它非常好用，也使用真正的浏览器，并且有许多其他语言的绑定。 - nrabinowitz

Answer 2

这里已经有几个月没有什么活动了，但是我最近一直在处理这些东西，也许这是你问题的答案。

如果jQuery已经作为页面的一部分加载，那么注入jQuery就不起作用，你会得到你描述的行为（我也遇到过这种情况）。

因此，在注入jQuery代码之前，您应该首先确保它不是上下文的一部分。

- Alan Kaiser