javascript - ventana - modal dinamico bootstrap

Cómo desplazarse hacia abajo con Phantomjs para cargar contenido dinámico

Question

Estoy tratando de eliminar enlaces de una página que genera contenido dinámicamente a medida que el usuario se desplaza hacia abajo (desplazamiento infinito). He intentado hacer cosas diferentes con Phantomjs pero no he podido reunir enlaces más allá de la primera página. Digamos que el elemento de la parte inferior que carga contenido tiene clase .has-more-items . Está disponible hasta que se carga el contenido final mientras se desplaza y luego deja de estar disponible en DOM (visualización: ninguno). Estas son las cosas que he intentado-

• Establecer viewportSize en una gran altura justo después de var page = require(''webpage'').create();

page.viewportSize = {ancho: 1600, alto: 10000,};

• Usando page.scrollPosition = { top: 10000, left: 0 } dentro de page.open pero no tiene efecto como-

page.open(''http://example.com/?q=houston'', function(status) {
   if (status == "success") {
      page.scrollPosition = { top: 10000, left: 0 };  
   }
});

• También intenté ponerlo dentro de la función page.evaluate pero eso da

Error de referencia: no se puede encontrar la página variable

• Intenté usar el código jQuery y JS dentro de la página. page.evaluate y page.open pero en page.open

$ ("html, body"). animate ({scrollTop: $ (document) .height ()}, 10, function () {//console.log(''check for execution '');});

tal como está y también dentro de document.ready . Del mismo modo para código JS

window.scrollBy(0,10000)

tal como es y también dentro de window.onload

Estoy realmente impresionado por esto durante 2 días y no he podido encontrar un camino. Cualquier ayuda o sugerencia sería apreciada.

Actualizar

Encontré un fragmento de código útil en https://groups.google.com/forum/?fromgroups=#!topic/phantomjs/8LrWRW8ZrA0

var hitRockBottom = false; while (!hitRockBottom) {
    // Scroll the page (not sure if this is the best way to do so...)
    page.scrollPosition = { top: page.scrollPosition + 1000, left: 0 };

    // Check if we''ve hit the bottom
    hitRockBottom = page.evaluate(function() {
        return document.querySelector(".has-more-items") === null;
    }); }

Donde .has-more-items es la clase de elemento a la que quiero acceder, que está disponible inicialmente en la parte inferior de la página y a medida que nos desplazamos hacia abajo, se mueve hacia abajo hasta que todos los datos se cargan y luego dejan de estar disponibles.

Sin embargo, cuando lo probé, está claro que se está ejecutando en bucles infinitos sin desplazarse hacia abajo (renderizo imágenes para verificar). He intentado reemplazar page.scrollPosition = { top: page.scrollPosition + 1000, left: 0 }; con códigos de abajo también (uno a la vez)

window.document.body.scrollTop = ''1000'';
location.href = ".has-more-items";
page.scrollPosition = { top: page.scrollPosition + 1000, left: 0 };
document.location.href=".has-more-items";

Pero nada parece funcionar.

Answer 1

El fragmento de código a continuación funciona bien para pinterest. Investigué mucho para eliminar el pinterest sin phantomjs, pero es imposible encontrar el enlace disparador infinito. Creo que el siguiente código ayudará a otra página web de desplazamiento infinito a raspar.

page.open(pageUrl).then(function (status) {
              var count = 0;
                // Scrolls to the bottom of page
              function scroll2btm(){
                if(count <500) {
                  page.evaluate(function(limit) {
                    window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
                    return document.getElementsByClassName(''pinWrapper'').length; //use desired contents(eg. pin) selector for count presence number
                  }).then(function(c){
                    count=c;
                    console.log(count)//print no of content found to check
                  });
                  setTimeout(scroll2btm,3000);
                }
              else { // required number of item found
                }
              }
              scroll2btm();
            })

Answer 2

Encontré una manera de hacerlo e intenté adaptarme a tu situación. No probé la mejor manera de encontrar la parte inferior de la página porque tenía un contexto diferente, pero échale un vistazo. El problema es que tienes que esperar un poco para que la página se cargue y javascript funciona de forma asíncrona, por lo que debes usar setInterval o setTimeout ( see ).

page.open(''http://example.com/?q=houston'', function () {

  // Checks for bottom div and scrolls down from time to time
  window.setInterval(function() {
      // Checks if there is a div with class=".has-more-items" 
      // (not sure if this is the best way of doing it)
      var count = page.content.match(/class=".has-more-items"/g);

      if(count === null) { // Didn''t find
        page.evaluate(function() {
          // Scrolls to the bottom of page
          window.document.body.scrollTop = document.body.scrollHeight;
        });
      }
      else { // Found
        // Do what you want
        ...
        phantom.exit();
      }
  }, 500); // Number of milliseconds to wait between scrolls

});

Answer 3

La solución "correcta" no funcionó para mí. Y, por lo que he leído, CasperJS no usa window (pero puedo estar equivocado), lo que me hace dudar de que la window funcione.

Lo siguiente me funciona en la consola de Firefox / Chrome; pero, no funciona en CasperJS (dentro de la función casper.evaluate ).

$(document).scrollTop($(document).height());

Lo que funcionó para mí en CasperJS fue:

casper.scrollToBottom();
casper.wait(1000, function waitCb() {
  casper.capture("loadedContent.png");
});

Lo cual también funcionó al mover casper.capture a la función de Casper.

Sin embargo, la solución anterior no funcionará en algunos sitios como Twitter; jQuery parece romper la función casper.scrollToBottom() , y tuve que eliminar la referencia de clientScripts a jQuery cuando trabajé dentro de Twitter.

var casper = require(''casper'').create({
    clientScripts: [
       // ''jquery.js''
    ]
});

Algunos sitios web (por ejemplo, BoingBoing.net) parecen funcionar bien con jQuery y CasperJS scrollToBottom() . No estoy seguro de por qué algunos sitios funcionan y otros no.

Answer 4

Sé que ha sido respondido hace mucho tiempo, pero también encontré una solución para mi situación específica. El resultado es una pieza de javascript que se desplaza al final de la página. Está optimizado para reducir el tiempo de espera.

No está escrito para PhantomJS por defecto, por lo que tendrá que ser modificado. Sin embargo, para un principiante o alguien que no tiene acceso de root, un Iframe con javascript inyectado (ejecute Google Chrome con el parámetro --disable-javascript) es un buen método alternativo para raspar un conjunto más pequeño de páginas ajax. La principal ventaja es que se puede depurar fácilmente, ya que tiene una visión general de lo que está sucediendo con su raspador.

function ScrollForAjax () {

    scrollintervals = 50;
    scrollmaxtime = 1000;

    if(typeof(scrolltime)=="undefined"){
        scrolltime = 0;
    }

    scrolldocheight1 = $(iframeselector).contents().find("body").height();

    $("body").scrollTop(scrolldocheight1);
    setTimeout(function(){

        scrolldocheight2 = $("body").height();

        if(scrolltime===scrollmaxtime || scrolltime>scrollmaxtime){
            scrolltime = 0;
            $("body").scrollTop(0);
            ScrapeCurrentPage(iframeselector);
        }

        else if(scrolldocheight2>scrolldocheight1){
            scrolltime = 0;
            ScrollForAjax (iframeselector);
        }

        else if(scrolldocheight1>=scrolldocheight2){
            ScrollForAjax (iframeselector);
        }

    },scrollintervals);

    scrolltime += scrollintervals;
}

scrollmaxtime es una variable de tiempo de espera. Espero que sea útil para alguien :)