如何使用phantomJS来模拟鼠标悬停在HTML元素上 [英] How to use phantomJS to simulate mouse hover on a HTML element

问题描述

我有以下phantomJS代码来获取HTML代码：

I have the phantomJS code below to fetch the HTML code:

var page = require('webpage').create();
var url = 'http://example.com/';

page.open(url, function (status) {
    var js = page.evaluate(function () {
        return document;
    });
    console.log(js.all[0].outerHTML); 
    phantom.exit();
});

只有当鼠标悬停在特定元素上时，才能读取我要抓取的内容由JavaScript控制，所以上面的代码不起作用。

The content I want to fetch will only be read while the mouse is hover on the specific element which is controlled by JavaScript, so the code above is not working.

我想知道如何使用phantomJS代码模拟鼠标悬停在HTML元素上。假设我想将鼠标悬停在元素上，然后将HTML转储到输出中，该怎么办？

I want to know how to simulate the mouse hover on a HTML element using the phantomJS code. Let's say I want to mouse hover over on a element then dump the HTML to output, how should I do?

编辑：以下代码无效。可能是什么问题？

The following code didn't work. What could be the problem?

var page = require('webpage').create();
var url = 'http://example.com/';

page.open(url, function (status) {
    page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function(){
        $('#some_element').trigger('hover');
    });
    var js = page.evaluate(function () {
        return document;
    });
    console.log(js.all[0].outerHTML); 
    phantom.exit();
}); 

推荐答案

尝试加载您的页面与jquery：

Try load your page with jquery:

page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
    //(...)
});

然后在您的元素上调用hover：

and then call hover on your element:

$('#some_element').trigger('hover');

这篇关于如何使用phantomJS来模拟鼠标悬停在HTML元素上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！