Question

我有简单的phantomjs脚本，它为页面上某个跨距的左上角坐标提供了错误的结果。起初我认为这是因为span是内联元素，但我知道jQuery能够在浏览页面时获得正确的坐标，但是从phantomjs运行时它会失败。这是phantomjs的问题吗？可以解决吗？

这是脚本

    var page = require('webpage').create();
    page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36';
    page.viewportSize = { width: 1200, height: 800 };

    page.open('http://metalnoir.com/process/', function (status) {
        if (status !== 'success') {
            phantom.exit();
        }
        page.onConsoleMessage = function (msg) { console.log(msg); };

        page.evaluate(function() {
//this one works
            var jhdr = jQuery('body>div#main-container>div#content-container>div#full-width>div#portfolio-preview-container>div:nth-of-type(2)>div#portfolio-wrapper>div:nth-of-type(1)>div:nth-of-type(4)>h6');
            var hdr = jhdr.get(0);
            console.log(hdr.outerHTML);
            console.log(jhdr.offset().top + ' ' + jhdr.offset().left + ' ' + jhdr.width() + ' ' + jhdr.height());
            var hdrrect = hdr.getBoundingClientRect();
            console.log(hdrrect.top + ' ' + hdrrect.left + ' ' + hdrrect.bottom + ' ' + hdrrect.right);
//this one doesn't
            var jspn = jQuery('body>div#main-container>div#content-container>div#full-width>div#portfolio-preview-container>div:nth-of-type(2)>div#portfolio-wrapper>div:nth-of-type(1)>div:nth-of-type(4)>span');
            var spn = jspn.get(0);
            console.log(spn.outerHTML);
            console.log(jspn.offset().top + ' ' + jspn.offset().left + ' ' + jspn.width() + ' ' + jspn.height());
            var spnrect = spn.getBoundingClientRect();
            console.log(spnrect.top + ' ' + spnrect.left + ' ' + spnrect.bottom + ' ' + spnrect.right);
        });                                     
        phantom.exit();
    });

以下是示例脚本输出

<h6>Polishing</h6> off 85 10
461.59375 215.59375 121 21
461.59375 215.59375 482.59375 336.296875
<span class="post-info">Process</span> off 0 0
0 0 50 0
0 0 0 0

虽然h6对坐标没问题（只是为了说明脚本的工作原理），但是span有零。在浏览器中，span有377,345,121,17（当然取决于视图大小）。但肯定不是零。

Answer 1

问题解决了。简而言之，浏览器和phantomjs不同地解释了格式错误的CSS。虽然浏览器（我试过Chrome和IE）以错误的方式停止css处理，但phantomjs仍在继续。

现在详情：

我在本地保存文件并开始逐个删除css文件的链接。删除一个css文件后突然出现了。文件格式错误的媒体指令

@media only screen and (max-device-width:800px {
#logo-container a img {max-height:52px !important;}
}

之后它有隐藏跨度的规则

.post-info {
display: none !important;
}

因此，我认为浏览器在格式不正确的规则后停止并且phantomjs继续并应用“none”规则。这就是为什么我没有看到phantomjs渲染截图的跨度并且无法获得正确的坐标。

之后，解决方法很简单 - 覆盖显示样式

if (jspn.hasClass('post-info')) jspn.attr('style', 'display: inline !important;');

最终输出

<h6>Polishing</h6> off 85 10
461.59375 415.59375 121 21
461.59375 415.59375 482.59375 536.296875
<span class="post-info" style="display: inline !important;">Process</span> off 85 31
482.59375 415.59375 121 17
482.59375 415.59375 499.59375 536.296875

无法在phantomjs中获得span元素的左上角坐标，但在浏览器中它可以正常工作

1 个答案: