javascript - 如何将 Recaptcha V2 挑战弹出窗口定位在视口(viewport)的中心？

Question

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

我试过:

• 通过在 .render 函数之后添加代码来更改 iframe CSS 类的第一个父级，但 iframe 为空。
• 我尝试在递归函数(非阻塞循环)中检测对 iframe 内 Recaptcha 复选框 的点击，然后更改弹出 CSS 类，但该复选框始终为空，直到我使用chrome 检查器到复选框，然后尝试让控制台中的复选框正常工作。

Answer 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 输出发生变化，则可能需要不同的解决方案。