DOM-Manipulation mit PhantomJS

Question

Ich benutze PhantomJS, um Screenshots von beliebigen URLs zu erstellen. Bevor der Screenshot gemacht wird, möchte ich das Seiten-DOM manipulieren, um alle Dropdown-Menüs zu entfernen, da PhantomJS sie falsch in der oberen linken Ecke der Seite darstellt (ein bekanntes Phantom

Ich habe a einfaches DOM-Skript, um dies zu tun mit:

var selects = document.getElementsByTagName('select'); 

    for (var i=0; i < selects.length; i++) { 
     document.getElementsByTagName('select')[i].style.visibility="hidden"; 
    } 

Dies wurde getestet und funktioniert gut als Stand-Alone-Javascript. Es ist jedoch nicht funktionieren innerhalb des PhantomJS Code, den ich die Screenshots (letzten Teil gezeigt) zu sammeln, bin mit:

page.open(address, function (status) { 

    if (status !== 'success') { 
     console.log('Unable to load the address!'); 
    } else { 
     window.setTimeout(function() { 

      var selects = document.getElementsByTagName('select'); 

      for (var i=0; i < selects.length; i++) { 
       document.getElementsByTagName('select')[i].style.visibility="hidden"; 
      } 

      page.render(output); 

      phantom.exit(); 

     }, 200); 
    } 
}); 

Einigen Seiten sind nach wie vor mit einem Auswahlfeld an der falschen Stelle zu machen. Ich würde mich freuen, wenn ich entweder den ursprünglichen PhantomJS-Rendering-Fehler beheben oder die Dropdown-Menüs im DOM ausblenden würde. Vielen Dank.

Answer 1

Run sie im richtigen Kontext, das heißt innerhalb der Seite mit page.evaluate. Es gibt viele examples included with PhantomJS, die dies z.B. useragent.js.

Answer 2

Dieser Code funktioniert nicht? Ich habe die Variable cached selects in der for-Schleife verwendet, anstatt die Elemente aus dem DOM erneut auszuwählen, um die Leistung zu verbessern.

var selects = document.getElementsByTagName('select'); 
for (var i=0; i < selects.length; i++) { 
    selects[i].style.visibility="hidden"; 
}