2

私は非常に小さなテストを行いました：

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

page.open("http://www.google.it/search?q=web+design", function(status){

    if (status === 'success')
    {
        page.render('google.png');
        fs.write("source.html", page.content, 'w'); 
    }

    phantom.exit(); 
})

ご覧のとおり、google.it で「ウェブ デザイン」を検索します。

ここで、source.html を見ると、PhantomJS で生成されたソース コードと実際の (Chrome の Element Inspector) html との違いに気付きました。

私のソースコードでは、結果には次のコードがあります:

<li class="g">
   <h3 class="r"><a href="/url?q=http://www.html.it/web-design/&amp;sa=U&amp;ei=Z2LZUbSaBcGV7Abm54BI&amp;ved=0CCwQFjAB&amp;usg=AFQjCNGagkxLs36cXSzGjyhnBX7duCI6dA"><b>WebDesign</b> - Guide e approfondimenti per webdesigner - HTML.it</a></h3>
   <div class="s">
      <div class="kv" style="margin-bottom:2px"><cite>www.html.it/<b>web</b>-<b>design</b>/</cite><span class="flc"> - <a href="/url?q=http://webcache.googleusercontent.com/search%3Fq%3Dcache:3GWnT4NPDr0J:http://www.html.it/web-design/%252Bweb%2Bdesign%26hl%3Dit%26ct%3Dclnk&amp;sa=U&amp;ei=Z2LZUbSaBcGV7Abm54BI&amp;ved=0CC0QIDAB&amp;usg=AFQjCNE_1Gt5RL9WQAGZpM_3f-oxZ1VR9w">Copia cache</a></span></div>
      <span class="st">WebDesign: progettazione Web, User Experience, Architettura dell'informazione, <br>  i consigli di esperti designer in guide e articoli di approfondimento in italiano.</span><br>
   </div>
</li>

しかし、実際のソース (Chrome の Element Inspect を介して読み取る) は次のとおりです。

<li class="g">
   <!--m-->
   <div data-hveid="55" class="rc">
      <span style="float:left"></span>
      <h3 class="r"><a href="/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=2&amp;cad=rja&amp;ved=0CDgQFjAB&amp;url=http%3A%2F%2Fwww.html.it%2Fweb-design%2F&amp;ei=wmTZUfHdOYSO7AagwIHwDw&amp;usg=AFQjCNFaDZWWczDbce8TlYh9oqYluJ-E5g&amp;bvm=bv.48705608,d.ZGU" onmousedown="return rwt(this,'','','','2','AFQjCNFaDZWWczDbce8TlYh9oqYluJ-E5g','','0CDgQFjAB','','',event)"><em>WebDesign</em> - Guide e approfondimenti per webdesigner - HTML.it</a></h3>
      <div class="s">
         <div>
            <div class="f kv" style="white-space:nowrap">
               <cite>www.html.it/<b>web</b>-<b>design</b>/</cite>‎
               <div class="action-menu ab_ctl">
                  <a href="#" data-ved="0CDkQ7B0wAQ" class="clickable-dropdown-arrow ab_button" id="am-b1" aria-label="Dettagli risultato" jsaction="ab.tdd; keydown:ab.hbke; keypress:ab.mskpe" role="button" aria-haspopup="true" aria-expanded="false"><span class="mn-dwn-arw"></span></a>
                  <div data-ved="0CDoQqR8wAQ" class="action-menu-panel ab_dropdown" jsaction="keydown:ab.hdke; mouseover:ab.hdhne; mouseout:ab.hdhue" role="menu" tabindex="-1">
                     <ul>
                        <li class="action-menu-item ab_dropdownitem" role="menuitem"><a href="http://webcache.googleusercontent.com/search?q=cache:3GWnT4NPDr0J:www.html.it/web-design/+&amp;cd=2&amp;hl=it&amp;ct=clnk&amp;gl=it&amp;client=ubuntu" onmousedown="return rwt(this,'','','','2','AFQjCNEaothLaL83HBobw4UE8q_OpkIPrw','','0CDsQIDAB','','',event)" class="fl">Copia&nbsp;cache</a></li>
                     </ul>
                  </div>
               </div>
            </div>
            <div class="f slp"></div>
            <span class="st"><em>WebDesign</em>: progettazione Web, User Experience, Architettura dell'informazione, i consigli di esperti designer in guide e articoli di approfondimento in italiano.</span>
         </div>
      </div>
   </div>
   <!--n-->
</li>

ご覧のとおり、最後のコードはより完全です。

だから私の質問は：

これらの結果のコードが異なるのはなぜですか?

PhantomJS は、ブラウザーと同じようにページ内のすべての JS を実行することを読みましたが、なぜこれらの違いがあるのでしょうか?

ありがとうございました！

4

2 に答える 2

1

おそらく、Google の js コードによって行われたすべての DOM 変換が実行されるのを待つようにしてください…たとえば、これは.action-menu要素が利用可能になるのを待つことで実現できます (免責事項: casperjs の作成者として、私はここで casperjs を使用しています):

var fs = require('fs');

require('casper').create()
    .start("http://www.google.it/search?q=web+design")
    .waitForSelector(".action-menu", function() {
        this.capture('google.png');
        fs.write("source.html", this.getPageContent(), 'w'); 
    }).run();
于 2013-07-07T14:30:29.230 に答える