javascript - 如何在 Jquery 和 PhantomJS 中选择 Javascript 生成的字段？

Question

我想知道如何通过 Jquery 选择 Javascript 生成的输入字段。 例如考虑

<input type="hidden" name="field1_html" />

此输入标记无法通过查看页面源代码看到，它只会显示在 firebug 或检查元素中。这意味着它仅在生成 Javascript 时存在。我知道对于 HTML DOM，我们可以在 Jquery 中使用 CSS 选择器来从 DOM 中选择我们想要的元素，但正如我所说，我正在寻找一种方法来选择仅在页面加载后显示的元素。我在获取 PhantomJS headless 浏览器生成的字段的方式上没有看到任何资源，而不是可以通过 getHTML() 或 debugHTML() 显示的纯源代码。 上述输入标签例如是通过调用Javascript函数生成的

geteditorinit("http://example.com/pub","data[content_html]",298996,1,750,350,0,0,"content_html");

如何在 PhantomJS 中选择此 Javascript 函数生成的元素？

Answer 1

您必须使用评估方法从页面检索 DOM 信息。

例如:

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

page.open('http://youpage.com', function(status) {

  var interv,
      tryToGetValue = function () {

          var v = page.evaluate(function() {
              return $("input[name='field1_html']").val();
          });

          if (v) {
               console.log('Value found: ', v);
               clearInterval(interv);
               phantom.exit();
          }

      };

      interv = setInterval(tryToGetValue, 300);

});

由于您愿意获取由 javascript 生成的输入，因此您可能需要监听一些事件，例如 onInitialized、onLoadFinished 甚至使用 setTimeout。

您可以在 PhantomJS WebPage API 文档中查看示例 http://phantomjs.org/api/webpage/