检索到的锚点列表被破坏了?[英] Retrieved anchors list gets corrupted?

问题描述

我正在尝试分析 PhantomJS 中的锚链接(它们的 text 属性).

检索发生在这里:

var list = page.evaluate(function() {
  return document.getElementsByTagName('a');
});

这将返回一个具有 length 属性的对象,该属性很好(与在控制台中运行 document.getElementsByTagName('a'); 时得到的相同的 length 相同).但是对象中的绝大多数元素都有 null 的值,这不好..我不知道为什么会这样.

我一直在尝试通过 slice 转换为真正的数组,但效果不佳.我试过不同的网站,没有区别.我已经转储了 .png 文件以验证正确加载并且网站已正确加载.

这显然不是完整的脚本,而是一个在知名公共站点上显示问题的最小脚本;)

如何从加载的页面中检索完整的锚点列表?

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

page.onError = function(msg, trace) 
{ //Error handling mantra
  var msgStack = ['PAGE ERROR: ' + msg];
  if (trace && trace.length) {
    msgStack.push('TRACE:');
    trace.forEach(function(t) {
      msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function +'")' : ''));
    });
  }
  console.error(msgStack.join('\n'));
};

phantom.onError = function(msg, trace) 
{ //Error handling mantra
  var msgStack = ['PHANTOM ERROR: ' + msg];
  if (trace && trace.length) {
    msgStack.push('TRACE:');
    trace.forEach(function(t) {
      msgStack.push(' -> ' + (t.file || t.sourceURL) + ': ' + t.line + (t.function ? ' (in function ' + t.function +')' : ''));
    });
  }
  console.error(msgStack.join('\n'));
  phantom.exit(1);
};

function start( url )
{
  page.open( url , function (status)
  {
    console.log( 'Loaded' ,  url , ': ' , status  );
    if( status != 'success' )
      phantom.exit( 0 );

    page.render( 'login.png');

    var list = page.evaluate(function() {
      return  document.getElementsByTagName('a');
    });

    console.log( 'List length: ' , list.length );

    for(  var i = 0 ; i < list.length ; i++ )
    {
     if( !list[i] )
      {
        console.log( i , typeof list[i] ,  list[i] === null , list[i] === undefined );
        //list[i] === null -> true for the problematic anchors
        continue;
      }
      console.log( i,  list[i].innerText , ',' , list[i].text /*, JSON.stringify( list[i] ) */ );
    }
    //Exit with grace
    phantom.exit( 0 );
  });
}    

start( 'http://data.stackexchange.com/' );
//start( 'http://data.stackexchange.com/account/login?returnurl=/' );

推荐答案

当前版本的 phantomjs 只允许原始类型(布尔、字符串、数字、[] 和 {})在页面上下文之间传递.所以基本上所有的功能都会被剥离,这就是 DOM 元素.t.niese 找到了来自 docs:

<块引用>

注意:评估函数的参数和返回值必须是简单的原始对象.经验法则:如果可以通过 JSON 序列化就可以了.

闭包、函数、DOM 节点等将不起作用

您需要在页面上下文中完成部分工作.如果你想要每个节点的 innerText 属性,那么你需要先将它映射到一个原始类型:

var list = page.evaluate(function() {
    return Array.prototype.map.call(document.getElementsByTagName('a'), function(a){
        return a.innerText;
    });
});
console.log(list[0]); // innerText

您当然可以同时映射多个属性:

return Array.prototype.map.call(document.getElementsByTagName('a'), function(a){
    return { text: a.innerText, href: a.href };
});

本文地址:https://www.itbaoku.cn/post/1740123.html