javascript - getBoundingClientRect() 导致 javascript 崩溃？

Question

所以我尝试使用我的 phantom.js 中的以下代码从页面上抓取验证码图像

if(page.content.search('captcha') != -1){
    console.log('taking a picture')
    var clipRect = document.querySelector("img[id='auth-captcha-image']").getBoundingClientRect();
    console.log('got bounds')
    page.clipRect = {
        top:    clipRect.top,
        left:   clipRect.left,
        width:  clipRect.width,
        height: clipRect.height
    };
    page.render('capture.png');
  }

如您所见，它非常简单。获取元素，获取元素边界的剪辑，然后截取渲染图。

现在当我执行

document.querySelector("img[id='auth-captcha-image']").getBoundingClientRect()

在 google chrome 控制台中它返回这个。

ClientRect {top: 430, right: 621, bottom: 500, left: 421, width: 200…}

但是在我的 javascript 代码中，它似乎产生了某种我无法捕捉到的错误。当我删除后缀“.getBoundingClientRect()”时，代码开始工作。 (显然我必须为 clipRect 尺寸添加虚拟值)。

我不太明白它是如何崩溃的，甚至如何查看崩溃的堆栈跟踪/错误消息..

任何帮助都会很棒谢谢

Answer 1

所有与目标页面的 DOM 相关的 javascript 都必须在 page.evaluate() 函数中执行。

var clipRect = page.evaluate(function(){
    return document.querySelector("img[id='auth-captcha-image']").getBoundingClientRect();
});