如何使用CasperJS在iframe中选择具有特定值或内容的选项?

时间:2017-03-02 17:26:11

标签: javascript jquery iframe casperjs

我正在使用CasperJS抓取,但我需要先点击某些内容才能完成页面的搜索过程。但我无法通过其值或内容选择特定选项。

1.点击按钮" All"在父框架中:

<select name="sort_id" id="sort_id" class="p9"; display: block;" onclick="javascript: window.setTimeout('Hide_Select(&quot;sort_id&quot;,false)',3); showDialog('LIST','SearchList.aspx?ddl_id=sort_id&amp;key=lar~sort_id&amp;EncodingName=',460,360,true);return false;">
        <option value="">All</option>
    </select>

2.跳转到子框架的页面:

<div id="b_div" class="ym-body">
<iframe>
#document
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>
</head>
<body>
  <form method="post" action="SearchList.aspx?ddl_id=sort_id&amp;key=lar%7esort_id&amp;EncodingName=" id="form1">
    <table>
        <tbody>
          <tr>
            <td>
              <select size="2" name="listb_sor" id="listb_sor" onchange="javascript:OptionClick(this,'sort_id');" style="height:300px;width:220px;">
                 <option value="">All</option>
                 <option value="001">OptionA</option>
                 <option value="00001">OptionB</option>

               </select>
               .......
</iframe>

3.我想选择OptionA。如果成功,子框架将自动关闭。但我无法成功选择OptionA。

目前我的代码是:

casper.then(function(){
    this.click('#sort_id.p9');
    this.page.switchToChildFrame(0);

    this.evaluate(function() {
        var sel = document.querySelectorAll('#listb_sor option');
        sel.val('001').onchange();
    });
});

但是当我抓到页面时,似乎代码无法成功选择OptionA。

1 个答案:

答案 0 :(得分:0)

如果IFrame有类似的内容,你可以克服iFrame ID:

casper.then(function() {
  this.click('#sort_id.p9');
});

casper.withFrame("IFrameID", function() {
  casper.then(function() {
    this.evaluate(function() {
      var sel = document.querySelectorAll('#listb_sor option');
      sel.val('001').onchange();
    });
  })
  casper.then(function() {
    // do other stuff in the IFrame
  })

});

casper.then(function() {
  // continue outside the IFrame
});

如果IFrame没有ID,你必须查看Iframe的索引,取决于页面上的IFrame:

... 
casper.withFrame(1, function() {
  casper.then(function() {
    this.evaluate(function() {
      var sel = document.querySelectorAll('#listb_sor option');
      sel.val('001').onchange();
    });
  })
  casper.then(function() {
    // do other stuff in the IFrame
  })
});
...

有关详细信息,请查看here on the official documentation