我正在尝试下载几乎完全由JavaScript生成的网站的HTML。因此,我需要模拟浏览器的访问,并且一直在使用PhantomJS。问题是,该网站使用了hashbang URL,而我似乎无法让PhantomJS处理hashbang -它只是一直在调用主页。

该站点是http://www.regulations.gov。默认值将您带到#!home。我尝试使用以下代码(来自here)尝试处理不同的hashbang。

if (phantom.state.length === 0) {
     if (phantom.args.length === 0) {
        console.log('Usage: loadreg_1.js <some hash>');
        phantom.exit();
     }
     var address = 'http://www.regulations.gov/';
     console.log(address);
     phantom.state = Date.now().toString();
     phantom.open(address);

} else {
     var hash = phantom.args[0];
     document.location = hash;
     console.log(document.location.hash);
     var elapsed = Date.now() - new Date().setTime(phantom.state);
     if (phantom.loadStatus === 'success') {
             if (!first_time) {
                     var first_time = true;
                     if (!document.addEventListener) {
                             console.log('Not SUPPORTED!');
                     }
                     phantom.render('result.png');
                     var markup = document.documentElement.innerHTML;
                     console.log(markup);
                     phantom.exit();
             }
     } else {
             console.log('FAIL to load the address');
             phantom.exit();
     }
}

这段代码会产生正确的hashbang(例如,我可以将hash设置为“#!contactus”),但是它不会动态生成任何其他HTML,而只是动态生成默认页面。但是,它可以正确输出我调用document.location.hash时的输出。

我还尝试将初始地址设置为hashbang,但是脚本只是挂起,什么也不做。例如,如果我将URL设置为http://www.regulations.gov/#!searchResults;rpp=10;po=0,则该脚本只是在将地址打印到终端后挂起,并且什么也没有发生。

最佳答案

这里的问题是页面的内容是异步加载的,但是您希望页面加载后立即可用。

为了抓取异步加载内容的页面,您需要等待抓取直到您感兴趣的内容已加载。根据页面的不同,可能会有不同的检查方式,但是最简单的方法是定期检查您希望看到的内容,直到找到为止。

这里的技巧是弄清楚要寻找的内容-您需要在加载所需的内容之前在页面上不显示的内容。在这种情况下,我为顶层页面找到的最简单的选择是手动输入您希望在每个页面上看到的H1标签,并将它们键入哈希值:

var titleMap = {
    '#!contactUs': 'Contact Us',
    '#!aboutUs': 'About Us'
    // etc for the other pages
};

然后,在成功块中,您可以设置循环超时以在h1标记中查找所需的标题。当它显示时,您就知道可以渲染页面了:
if (phantom.loadStatus === 'success') {
    // set a recurring timeout for 300 milliseconds
    var timeoutId = window.setInterval(function () {
        // check for title element you expect to see
        var h1s = document.querySelectorAll('h1');
        if (h1s) {
            // h1s is a node list, not an array, hence the
            // weird syntax here
            Array.prototype.forEach.call(h1s, function(h1) {
                if (h1.textContent.trim() === titleMap[hash]) {
                    // we found it!
                    console.log('Found H1: ' + h1.textContent.trim());
                    phantom.render('result.png');
                    console.log("Rendered image.");
                    // stop the cycle
                    window.clearInterval(timeoutId);
                    phantom.exit();
                }
            });
            console.log('Found H1 tags, but not ' + titleMap[hash]);
        }
        console.log('No H1 tags found.');
    }, 300);
}

上面的代码对我有用。但是,如果您需要抓取搜索结果,它将无法正常工作-您需要找出无需先知道标题即可找到的识别性元素或少量文本。

编辑:此外,看起来newest version of PhantomJS现在在获取新数据时会触发onResourceReceived事件。我没有对此进行研究,但是您可以将监听器绑定(bind)到此事件以达到相同的效果。

关于javascript - 使用javascript(phantomjs)导航/抓取hashbang链接,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6414152/

10-13 00:07