javascript - 如何调整 Invisible RECAPTCHA Image Select Pop Up Frame 的大小

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

这个问题的答案比我想象的要容易。特别感谢 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。

<script type="text/javascript">
	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': 'Your Site Key',
	'size': 'invisible',
	'badge' : 'bottomright', // possible values: bottomright, bottomleft, inline
	'callback' : function (recaptchaToken) {
	HTMLFormElement.prototype.submit.call(frm);
	}
	});

	frm.onsubmit = function (evt){
	evt.preventDefault();
	grecaptcha.execute(holderId);
	$('iframe').parent().css({ 'transform' : 'scale(0.77)', '-webkit-transform' : 'scale(0.77)' });
	};

	})(form);
	}
	};
</script>