javascript - 如何检索加载需要使用 PhantomJS 或其他工具单击鼠标的 ajax 数据

Question

我正在使用 PhantomJS 检索此页面:Target Page Link .我需要的内容在“行业公告”和“就业征才公告”标签下。由于本页为中文，如果您找不到标签，您可以使用浏览器的“查找”功能找到“行业公告”和“就业征才公告”标签。因为“行政公告”选项卡下的内容是作为默认选项加载的，我可以很容易地使用下面的脚本来检索页面:

var page = require('webpage').create();
var url = 'http://sa.ttu.edu.tw/bin/home.php';
page.open(url, function (status) {
    var js = page.evaluate(function () {
    return document;
    });
    console.log(js.all[0].outerHTML); 
    phantom.exit();
});

但是我使用PhamtomJS模拟鼠标点击后，“就业征才公告”标签下的内容没有加载，代码如下:

var page = require('webpage').create();
var url = 'http://sa.ttu.edu.tw/bin/home.php';

page.open(url, function (status) {
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js",                   function() {
    // jQuery is loaded, now manipulate the DOM
    $('#sm_adf63b93c89375a0bade42e5360b73274_1_Dyn_2_1').trigger('mouseover');
});
var js = page.evaluate(function () {
    return document;
});
    console.log(js.all[0].outerHTML); 
    phantom.exit();
});

这不起作用，因为未加载“就业征才公告”选项卡下的内容。如何找回“就业征才公告”标签下的内容？

更新:

看完一个PhantomJS example ，我将代码重构到下面。它没有工作，因为未加载“就业征才公告”选项卡下的内容。

var page = require('webpage').create();
var address = 'http://sa.ttu.edu.tw/bin/home.php';

page.open(address, function (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
        phantom.exit();
    } else {
        window.setTimeout(function () {
            var results = page.evaluate(function() {
                $('#sm_adf63b93c89375a0bade42e5360b73274_1_Dyn_2_1').trigger('mouseover');
                return document.documentElement.innerHTML;
            });

            console.log(results);

            phantom.exit();
        }, 5000);
    }
});

如果有任何方法可以解决这个问题，欢迎提供。不限于 PhamtoJS。

Answer 1

测试了这段代码，它输出了正确的图像，并选择了所需的选项卡。由于页面的底层结构，它并不是那么简单。希望您可以将其用作处理 DOM 的一些学习练习。

// utility function to send mouseclick event to an element
function mouseclick( element ) {
    // create a mouse click event
    var event = document.createEvent( 'MouseEvents' );
    event.initMouseEvent( 'click', true, true, window, 1, 0, 0 );

    // send click to element
    element.dispatchEvent( event );
}

// final function called, output screenshot, exit
function after_clicked( page ) {
    console.log( "+after_clicked()" );

    page.render( "after_click.png" );
    console.log( "Done" );
    phantom.exit( 0 );
}

// middle function, click on desired tab
function click_div( page ) {
    console.log( "+click_div()" );

    var clicked = page.evaluate(
        function ( mouseclick_fn ) {
            // want the div with class "submenu"
            var div = document.querySelector( "div.submenu" );
            if ( ! div ) {
                return false;
            }

            // want all the list elements in the div
            var li_array = div.querySelectorAll( "li" );
            if ( ! li_array ) {
                return false;
            }

            // we want the 2nd list element
            var li2 = li_array[1];
            if ( ! li2 ) {
                return false;
            }

            // want the anchor inside the 2nd list element
            var anchor = li2.querySelector( "a" );
            if ( ! anchor ) {
                return false;
            }

            // must focus on anchor to trigger underlying javascript on page
            anchor.focus();

            // want the div within this anchor, so we can click on the div
            var element = anchor.querySelector( "div" );
            if ( ! element ) {
                return false;
            }

            // click on this inner div
            mouseclick_fn( element );
            return true;
        }, mouseclick
    );

    if ( ! clicked ) {
        console.log( "Failed to find desired element" );
        phantom.exit( 1 );
        return;
    }

    console.log( "- clicked, waiting 5 seconds" );
    window.setTimeout(
        function () {
            after_clicked( page );
        },
        5000
    );
}

// first function, create page, load page
function main() {
    console.log( "+main()" );

    var page = require('webpage').create();

    page.open(
        "http://sa.ttu.edu.tw/bin/home.php",
        function (status) {
            if ( status !== 'success' ) {
                console.log( "Failed" );
                phantom.exit( 1 );
                return;
            }

            console.log( "- page loaded, waiting 2 seconds..." );
            window.setTimeout(
                function () {
                    click_div( page );
                },
                2000
            );
        }
    );
}

main();