Thao tác DOM với PhantomJS

Question

Tôi đang sử dụng PhantomJS để tạo ảnh chụp màn hình từ các URL tùy ý. Trước khi chụp màn hình, tôi muốn thao tác trang DOM để xóa tất cả các menu thả xuống, vì PhantomJS hiển thị chúng không chính xác ở góc trên cùng bên trái của trang (được biết là Phantom issue.)

Tôi có một tập lệnh DOM đơn giản để thực hiện việc này với:

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

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

Điều này đã được kiểm tra và hoạt động tốt như Javascript độc lập. Tuy nhiên, nó không hoạt động bên trong mã PhantomJS mà tôi đang sử dụng để thu thập các ảnh chụp màn hình (phần cuối được hiển thị):

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); 
    } 
}); 

Một số trang vẫn đang hiển thị với một hộp chọn sai. Tôi sẽ đánh giá cao sự giúp đỡ trong việc giải quyết lỗi dựng hình PhantomJS gốc hoặc ẩn các menu thả xuống trong DOM. Cảm ơn.

Answer 1

Chạy đúng ngữ cảnh, ví dụ: bên trong trang có page.evaluate. Có rất nhiều examples included with PhantomJS thể hiện điều này, ví dụ: useragent.js.

Answer 2

Mã này không hoạt động? Tôi đã sử dụng biến chọn lọc được lưu trong vòng lặp for thay vì chọn lại các phần tử từ DOM để cải thiện hiệu suất.

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