Question

PhantomJS 无法使用 select 标签操作下拉菜单

2017-10-27

249

javascript html drop-down-menu phantomjs html-select

我尝试运行一些 phantomjs 代码时遇到了一些问题。理论上，代码应该能够从下面的下拉菜单中选择一个选项。

<select name="Budget_Ctr2" size="1" onchange="JavaScript:Submitthis('Budget_Ctr2')" id="Budget_Ctr2">
  <option selected="selected" value="CAAH">CAAH</option>
      <option value="CAFLS">CAFLS</option>
      <option value="CECAS">CECAS</option>

所有代码都有效，除了我得到以下代码片段时：

var sel = document.getElementById('Budget_Ctr2');
var opts = sel.options;

到目前为止，我在堆栈上读到的所有内容都让我认为这应该有效。但是，当我运行程序时，我得到了“TypeError：null 不是对象（评估'sel.options'）。根据一些测试，我相当有信心'sel'本身不是 null，但我无法将错误与正在发生的事情联系起来。除了 phantomjs 之外，我对 javascript 不是很有经验，但有人有什么想法吗？

Answer 1

为什么 null 不是对象？运行 PhantomJS 脚本时，它不存在于 DOM 中。

但是为什么这个元素在非无头浏览器的开发工具中可见呢？它可能是通过编程添加的，是脚本工作的结果。

请记住：如果您在 page.open 回调触发时立即运行 page.evaluate ，它会运行得非常快 - 页面脚本可能还没有完成它们的工作。因此，您可以等待大概的时间，然后像这样运行 page.evaluate ：

var seconds = 3;
page.open(function(){

    setTimeout(function(){

        page.evaluate(){
            // do stuff
        }

    }, 1000 * seconds);

});

或者您可以等待目标元素出现，请参阅 waitfor.js

Answer 2

看来您的脚本位于 head 部分。如果是这样，那么它在加载 body 元素之前执行。尝试运行 console.log(document.body); 命令，它将返回 null 。

您需要将代码包装在 window.onload 处理程序中，或将其包含在 jQuery 中的 $(document).ready() 中，或将其放在 </body> 标记之前。

请参阅此 answers 以获取更多信息。