Phantomjs ignoring style in header

Asked

Viewed 42 times

1

I’m capturing the position of some elements in the DOM of an html but Phantomjs is ignoring the padding applied via css. After doing the page.evaluate I capture the top/left:

var res = page.evaluate(function () 
{                   
    var imageMapTags="";
    $('a').each(function()
    {    
        var objOffset = $(this).position();
        var top = objOffset.top;
        var left = objOffset.left;
    }
}

I initially imagined that the html of the page might not be being loaded correctly, but when making a console.log(page.content) and picking up the output, it shows the html loaded correctly:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8" /> 
        <title>links</title>   
          <style type="text/css">
              #blog {margin-left: 50px;}
          </style>
    </head> 
    <body> 
        <a id="home" href="http://minhahome.com">Home</a>
        <a id="blog" href="http://blog.com">Blog</a>
        <br/>
    </body> 
</html>

The top/left of the "Home" link returns (8.8) but the "Blog" link is returning (49.8) when actually it should be (99.8) because of the CSS that adds 50px padding-left. This same test of the . position() function of Jquery works normal directly in html, but through Phantomjs I can’t get it to apply the style.

javascript jquery html phantomjs

1 answer

0

Try it like this:

var res = page.evaluate(function() {
  var imageMapTags = "";
  $(document).ready(function() {
      $('a').each(function() {
          var objOffset = $(this).position();
          var top = objOffset.top;
          var left = objOffset.left;
        }
      })
  })
})

Maybe the .ready() ensure that the style is already applied.

  • I tested here with Document.ready but unfortunately it didn’t work, Phantomjs hangs and can’t even print what’s inside. I don’t think he plays.

Browser other questions tagged javascript jquery html phantomjs

You are not signed in. Login or sign up in order to post.