PhantomJs ignoring style no header

Question

PhantomJs ignoring style no header

Navigation

#1 by (0 votes)

1

I am capturing the position of some elements in the DOM of an html but the 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;
    }
}

Initially I imagined that the html page might not be loading properly, but when doing a console.log (page.content) and picking 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 in fact it should be (99.8) because of the CSS that adds 50px of padding -left. This same test of Jquery's .position () function works normal right in html, but through PhantomJs I can not make it apply style.

javascript html jquery phantomjs

asked by anonymous 29.12.2016 / 15:28

1 answer

Deleting child records with Spring JPA @ManyToOne annotation How to use an Oracle database and a Sql Server simultaneously with Entity Framework 6 in a single application?

score 0 · Answer 1

Try 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 .ready() ensures the style is already applied.