javascript PhantomJs 点击链接或运行页面功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9731131/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
PhantomJs clicking links or running on-page functions
提问by Jeff Ryan
I'm just getting used to PhantomJs and so far its really cool.
我只是习惯了 PhantomJs，到目前为止它真的很酷。
I'm trying to crawl a site and get data about the products on the site. Each product page loads with the default color of the product visible. When you click on a color swatch it swaps the new color out by running a function. Each clickable color swatch element looks like this:
我正在尝试抓取网站并获取有关该网站上产品的数据。每个产品页面加载时都显示产品的默认颜色。当您单击色样时，它会通过运行一个函数来换出新颜色。每个可点击的颜色样本元素如下所示：
<input type="image" id="swatch_0" onclick="pPage.getColor(0);" src="http://www.site.com/img50067.jpg">
getColor updates the thumbnail and price for that color. The id increments for each available color (swatch_0, swatch_1, etc) and the argument passed to getColor increments as well. I want to iterate through each color with PhantomJs and pull the relevant data for each.
getColor 更新该颜色的缩略图和价格。每个可用颜色（swatch_0、swatch_1 等）的 id 递增，传递给 getColor 的参数也递增。我想用 PhantomJs 遍历每种颜色并为每种颜色提取相关数据。
I've loaded the page, loaded jQuery, and can pull the data for the initally loaded color, but nothing seems to allow me to execute click events.
我已经加载了页面，加载了 jQuery，并且可以为初始加载的颜色提取数据，但似乎没有任何东西允许我执行点击事件。
here is what I'm trying:
这是我正在尝试的：
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);
}
This gives me:
这给了我：
console> Price is: .95
console> Selection is: blue
console> [Object Object]
console> TypeError: 'undefined' is not and object // repeating until I manually exit
no other code runs. I've also tried firing the event without jQuery like this:
没有其他代码运行。我也试过像这样在没有 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);
And running the function directly:
并直接运行该函数：
pPage.getColor(1);
And I get the same output. Any help is appreciated.
我得到相同的输出。任何帮助表示赞赏。
回答by nrabinowitz
If the onclickhandler is specified directly in the HTML as you have it here, you can call it directly with Javascript:
如果onclick处理程序是直接在 HTML 中指定的，就像您在此处拥有的那样，您可以直接使用 Javascript 调用它：
$(function() {
$('#swatch_0')[0].onclick();
});
?
I believe you can also use the PhantomJS pagemethod sendEvent()to issue a native click event. But it looks like this is a bit complicated, as you have to call this from the PhantomJS context with the x,y position of the mouse. Untested code:
? 相信你也可以使用 PhantomJS 的page方法sendEvent()来发出原生的点击事件。但这看起来有点复杂，因为您必须从 PhantomJS 上下文中使用鼠标的 x,y 位置调用它。未经测试的代码：
var elementOffset = page.evaluate(function() {
return $('#swatch_1').offset();
});
page.sendEvent('click', elementOffset.left + 1, elementOffset.top + 1);
回答by Alan Kaiser
not much activity here for a few months, but i've been working with this stuff lately and maybe this is an answer to your question
几个月来这里没有太多活动，但我最近一直在研究这些东西，也许这是对您问题的回答
if jquery is already loaded as part of the page you're running, then injecting jquery won't work, you will get the behavior you describe (i encountered this too).
如果 jquery 已经作为您正在运行的页面的一部分加载，那么注入 jquery 将不起作用，您将获得您描述的行为（我也遇到过这种情况）。
So when you inject the jquery code you should first make sure it's not already part of the context
因此，当您注入 jquery 代码时，您应该首先确保它不是上下文的一部分
