如何调整不可见的RECAPTCHA图像的大小选择弹出框

Question

我最近在我的网站上添加了Google RECAPTCHA V2 INVISIBLE版本。

我的问题是出现的弹出框在屏幕上很大。

现在..我不是在谈论“我不是机器人”框（我在网上找到的所有答案似乎都在谈论缩放这个小灰色框）。所以不是这个

我说的是实际的图像选择弹出框，您必须在其中单击图像。这可笑的东西；

我遇到的问题不仅仅针对移动设备...在笔记本电脑上看起来甚至很大。

我找到的常见答案是this one，但这不会更改弹出图像选择窗口的大小。我玩过这个游戏，尝试过各种组合，但是没有用。

我在一个简单的表单字段上有此不可见的RECAPTCHA，以便人们注册我们的电子通讯。我想先验证HTML5表单字段，然后在提交时调用RECAPTCHA ...

我在这里找到了很多脚本（感谢先前提交该答案的人），就像脚本一样。

所以，这是我完整的代码。

var renderGoogleInvisibleRecaptcha = function() {
  for (var i = 0; i < document.forms.length; ++i) {
    var form = document.forms[i];
    var holder = form.querySelector('.recaptcha-holder');
    if (null === holder) {
      continue;
    }

    (function(frm) {

      var holderId = grecaptcha.render(holder, {
        'sitekey': 'site key',
        'size': 'invisible',
        'badge': 'bottomright',
        'callback': function(recaptchaToken) {
          HTMLFormElement.prototype.submit.call(frm);
        }
      });

      frm.onsubmit = function(evt) {
        evt.preventDefault();
        grecaptcha.execute(holder);
      };

    })(form);
  }
};

<script src="https://www.google.com/recaptcha/api.js?onload=renderGoogleInvisibleRecaptcha&render=explicit" async defer></script>
<div class="news-container">
  <form action="../php_scripts/handler.php" method="post" enctype="multipart/form-data" autocomplete="off">

    <div class="news-title">
      Subscribe to our Monthly E-Newsletter
    </div>

    <div class="news-input">
      <div class="field-icon"><i class="fi-mail"></i></div>
      <input class="input" name="email" type="email" required="required" placeholder="Email Address" id="email" oninvalid="setCustomValidity('Please Enter A Valid Email Address')" onchange="try{setCustomValidity('')}catch(e){}" />
    </div>
    <div class="recaptcha-holder"></div>

    <div class="news-submit">
      <button id="submit" name="submit" type="submit" value="submit">Send</button>
    </div>
  </form>

我知道可以调整此弹出窗口的大小，因为我过去看到的站点都有用于图像选择的可爱的小弹出窗口，我该怎么做？

Answer 1

我为您的问题提供了解决方案，下面的屏幕快照中有一个div，其中包含iframe，

您应该将此CSS穿孔添加到div上方的iframe，还可以更改scale的值以使其更大或更小：

transform: scale(0.77);
-webkit-transform: scale(0.77);

Answer 2

这个问题的答案比我想像的要容易。.特别感谢Ramon给我提供了导致答案的线索。

我在执行recaptcha函数后立即向Java添加了一行代码

$（'iframe'）。parent（）。css（{'transform'：'scale（0.77）'，'-webkit-transform'：'scale（0.77）'}）;

在加载iframe时，将根据给定的参数对其进行缩放。这解决了Image Select iframe弹出窗口的视觉外观问题。我猜这可能会更进一步，并用于为手机创建动态缩放，但是0.77可以满足我的需求。

该解决方案的唯一缺点是，一旦调用execute recaptcha函数，它将在页面上缩放每个iframe。我试图找到一种解决方案，该解决方案只是按比例调整了Recaptcha iframe的尺寸，但未能成功。

因此，这是最终的功能齐全的Java代码。这将使用HTML5方法验证表单字段，然后调用recapcha，该代码现在可以如上所述进行缩放。

declare @table table (name varchar(16), salary int)
insert into @table
values
('abc',10000),
('abc',1000),
('def',100),
('xxf',100)

select 
    Name
    ,max(salary) 
from @table 
group by Name 
having count(*) > 1