javascript - 使用 PhantomJS 选择菜单项

Question

我有简单的 PhantomJS 脚本来将网站的 Javascript 内容解析为 html。 (然后使用其他工具从 html 代码中提取一些数据。)

var page = require('webpage').create();
var fs = require('fs');// File System Module
var output = '/tmp/sourcefile'; // path for saving the local file
page.open('targeturl', function() { // open the file
  fs.write(output,page.content,'w'); // Write the page to the local file using page.content
  phantom.exit(); // exit PhantomJs
});

(我从 http://kochi-coders.com/2014/05/06/scraping-a-javascript-enabled-web-page-using-beautiful-soup-and-phantomjs/ 得到这些代码行)

这过去在所有目标都有直接链接时有效。现在它们在同一个 url 后面，并且有下拉菜单:

<select id="observation-station-menu" name="station" onchange="updateObservationProductsBasedOnForm(this);">
  <option value="101533">Alajärvi Möksy</option>
  ...    
  <option value="101541">Äänekoski Kalaniemi</option>
  </select>

这是我实际想要加载的菜单项:

<option value="101632">Joensuu Linnunlahti</option>

因为这个菜单，我的脚本只下载与默认位置相关的数据。我如何从菜单加载其他项目的内容并下载该项目的 html 内容？

我的目标站点是:http://ilmatieteenlaitos.fi/suomen-havainnot

(如果有比 PhantomJS 更好的方法来做到这一点，我也可以使用它。我的兴趣是在数据被抓取后处理数据，我选择了 PhantomJS 只是因为它是第一个起作用的东西。某些选项可能会受到限制，因为我的服务器是 Raspberry Pi 并且可能无法在其上运行:Python Selenium: Firefox profile error )

Answer 1

因为页面有jQuery，你可以这样做:

page.open('targeturl', function() { // open the file
  page.evaluate(function() {
    jQuery('#observation-station-menu').val('101632').change();
  });  //change the checkbox, then fires the event
  fs.write(output,page.content,'w'); // Write the page to the local file using page.content
  phantom.exit(); // exit PhantomJs
});