Capture elements loaded after DOM state changing

47 views
Skip to first unread message

Salvatore Fresta

unread,
Dec 17, 2015, 5:54:53 PM12/17/15
to phantomjs
I'm trying to identify when a particular element is showed on the page. For example I want to write a script that tell me if in the page there is a banner like the follows:


the problem is that the banner is loaded when the DOM state changes (  s.addEventListener(document,"readystatechange",o)  )


It is not visible on screenshot too.

How can I solve this? I tried using Waitfor by checking for an element with class "cc_banner-wrapper" but doesn't work. I'm trying also to start the page.evaluate after another one that waits until the DOM state change from loading to complete:

var status = "";
var trying = 0;


    do {


        if( status == "interactive" ) {
            var start = Date.now();
            while (Date.now() < start + 3000); // Wait 3 seconds
            trying++;
        }


        var status = page.evaluate(function () {
            return document.readyState;
        });


        console.log("\n\nDOM Status: "+status);


    } while( status != "complete" && trying < 3 );


// Now the DOM status is "complete"

var response = page.evaluate(function() {


        function check_banner() {


            if( document.getElementsByClassName("cc_banner-wrapper").length > 0)
              return 1;
            else
              return 0;


        }


        return check_banner();

});

// Response is always 0 - it never find .cc_banner-wrapper



Thanks

Damian Borowski

unread,
Dec 30, 2015, 4:21:00 AM12/30/15
to phantomjs
Hi!

Here is waitFor function I have written for my script. It is based on jQuery, but you could simply rewrite it without.

function waitFor (node, callback) {
  jqueryLoaded = page.evaluate(function () {
    if (window.jQuery != undefined) {
      return true;
    } else {
      return false;
    }
  })

  nodeLoaded = page.evaluate(function (node) {
    if ($(node).length != 0) {
      return true;
    } else {
      return false;
    }
  }, node)

  if (jqueryLoaded && nodeLoaded) {
    callback();
  } else {
    console.log('Waiting for node: ' + node);
    setTimeout(function () {
     waitFor(node, callback)
   }, 1000)
  }
}

Salvatore Fresta

unread,
Dec 30, 2015, 6:12:06 AM12/30/15
to phantomjs
Hi Damian,

thank you so much. I already tested the waitFor but it doesn't work in this case. 

As you can see on the page (https://silktide.com/tools/cookie-consent/) the div with class cc_banner-wrapper is loaded after a DOM status changing. Can you see it with your function? If yes, can you show me the complete code?

​A big thank you​

Reply all
Reply to author
Forward
0 new messages