javascript - casperjs/phantomjs 如何单击 href ="javascript:function"并获取结果内容

Question

我是 phantomjs/casperjs 的新手。我正在尝试单击具有 javascript 函数的 href (href='javascript:getPhoneNumber(....))，并且我想获得 png 图像的打印结果。这是点击之前的 html block :

<div class="logo_text_link">

    <img class="logo_text_link" src="//static.awebsite.com/img/devices/mobile/awebsite_mobile_view_phone.png" alt="Telephoner">

    <span id="phoneNumber"><a class="nohistory adview_links" href='javascript:getPhoneNumber("https://api.awebsite.com", 1117004764, "54bb0281238b45a03f0ee695f73e704f")'>See&nbsp;the&nbsp;number&nbsp;</a></span
</div>

这是点击后的 html block :

<div class="logo_text_link">

    <img class="logo_text_link" src="//static.awebsite.com/img/devices/mobile/awebsite_mobile_view_phone.png" alt="Telephoner">

  <span id="phoneNumber"><div class="phoneimg"></div><img class="AdPhonenum" src="https://www.awebsite.com/pg/0f/AxLHLu0zHVAtWTp+nJCc2KkcZTdPfX3CM=.gif"></span>

</div>

我的目标是使用 casperjs 获取 img 链接(href)。我刚开始使用它，所以我实际上没有尝试太多:S

var casper = require('casper').create();
casper.start("http://mobile.awebsite.com/ventes_immobilieres/1117004764.htm?ca=12_s");
var a="dd";
casper.echo('before then');

 casper.then(function() {
        b=casper.click(x('//*[@id="phoneNumber"]/a'));
        casper.evaluate(function() {
             a = getPhoneNumber("https://api.awebsite.com", 1117004764, "54bb0281238b45a03f0ee695f73e704f") ; 
        });
        casper.echo(a);
        casper.echo(b);


});

casper.run();

如果有人知道如何完成这项任务，我将非常感激(我已经奋斗了两天了)!

Answer 1

我已将我的答案制作成带有注释的长代码示例；使用真实的网站来更好地解释要点。请务必打开该网站并检查脚本的作用。

var img; // We only really need one variable to get that image address

// Let's create a CasperJS instance that tries (although not fanatically)
// to mimic a browser: it has a real resolution instead of default 400x300 
// and a Chrome useragent (better to use those to not confuse websites into thinking 
// this is a mobile browser with small screen; they could even redirect to a mobile version)
// Of course if you _want_ a mobile version use resolution and useragent of a mob.browser
var casper = require('casper').create({
    pageSettings: {
        userAgent: "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36"
    },
    viewportSize : { width: 1280, height: 1024 },
    verbose: true
});
var x = require('casper').selectXPath;

casper.start("http://www.autreys.com/categories/firearms.html");

casper.then(function() {
    // make screenshots often to check that CasperJS sees what you think it sees
    casper.capture("1-before-click.jpg");    

    // Click on the first button of this type to open a lightbox
    casper.click(x('(//*[@class="QuickViewBtn"])[1]'));
});

console.log("This will be output before everything else because it is not put in the queue like casper.then or casper.wait");

// Give the lightbox some time to load (3 seconds)
casper.wait(3000);

// After that let's get the cover image from the lightbox
casper.then(function() {
    casper.capture("2-after-click.jpg");    
    img = casper.evaluate(function() {
        // This happens "in the browser"
        // You cannot assign local variables like "img" here
        // Just return variables "back"
        return document.querySelector("#QuickViewImage img").src;
    });
    console.log(img);
});

casper.run();