3

我的Recaptcha 挑战弹出窗口溢出了移动设备上的视口，我也无法滚动页面。我需要始终在视口中心（水平和垂直）显示挑战弹出窗口。我查看了 Recaptcha API，但没有找到在呈现挑战弹出窗口后如何执行代码。它不是自动使用Explicit呈现的。

我试过了：

  • 通过在 .render 函数之后添加代码来更改 iframe CSS 类的第一个父级，但 iframe 为空。
  • 我试图在递归函数（非阻塞循环）中检测 iframe 内的Recaptcha 复选框的点击，然后更改弹出 CSS 类，但复选框始终为空，直到我将 chrome 检查器转到复选框，然后尝试让控制台中的复选框有效。
4

1 回答 1

1

ReCaptcha v2 会在较小的（移动）屏幕上引起问题。我设法使用 CSS 解决了这个问题。

首先缩小 recaptcha 容器（在某些示例中为 g-recaptcha）以占用更少的屏幕空间（可选）。

#recaptcha-container
{
    transform: scale(0.77); 
    -webkit-transform: scale(0.77); 
    transform-origin: 0 0; 
    -webkit-transform-origin: 0 0;
}

隐藏从复选框指向挑战气泡的气泡箭头（也是可选的，但看起来更好恕我直言）。

.g-recaptcha-bubble-arrow
{
    display: none;
}

我相信您正在寻找类似以下内容的内容来查找气泡箭头的兄弟 div 元素，该元素包含带有挑战的 iFrame 并将其置于屏幕中心（无论大小如何）。

.g-recaptcha-bubble-arrow + div
{
    position: fixed !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

请注意，我使用的是 CSS 转换，因此请检查您的目标浏览器和版本的浏览器支持。另请注意，这适用于 ReCaptcha 的当前实现，如果 HTML 输出在未来发生变化，则可能需要不同的解决方案。

于 2020-12-17T09:56:34.180 回答