在 Recaptcha.reload() 完成后执行代码

Question

我在下面有一个函数，调用它来重新加载recaptcha 图像。它可以工作，重新加载图像，但之后不会做任何事情。基本上表格很小，上面有这个rec​​aptcha，所以我把它缩小了，允许点击放大等等。如果该人按下调用 reloadCAP() 的“获取另一个验证码”，它会检查它是否具有较大图像的类别。如果它确实需要它在新图像加载后将该类和css添加回元素，但我似乎无法让它工作。有什么想法吗？

function reloadCAP() {
    if($("#recaptcha_widget img").hasClass('largecap')) {
        Recaptcha.reload();
        $("#recaptcha_widget img").addClass('largecap');
        $('#recaptcha_image').css('height', '62px');
    } else {
        Recaptcha.reload();
    }
}

这里是这个的 html：

<div id="recaptcha_widget" class="formRow" style="display:none;">
    <span class="f_label">Enter Words Below:</span>
    <input type="text" class="setWidth" id="recaptcha_response_field" name="recaptcha_response_field" />

    <div class="cantread">
        <strong>Can't read this?</strong><br />
        <a href="javascript:reloadCAP()">Get another CAPTCHA</a>
    </div>

    <div id="recaptcha_image"></div> <!-- image loaded into this div -->
        <div class="clear"></div>
        <span class="smalltext">(click to enlarge)</span>

        <br clear="all" />
    </div>
<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6LfzMMwSAAAAADV6D04jDE6fKwrJ57dXwOEW-vY3&lang=en"></script>

Answer 1

听起来您真正需要的是自定义主题，这样您就可以完全根据需要设置验证码/图像/等样式：https://developers.google.com/recaptcha/docs/customization

如果您确实想坚持当前的实现，您可以在调用 Recaptcha.create() 之前挂钩到 Recaptcha 的内置（和未记录的）回调函数。

//Called after Recaptcha.reload() is finished loading
Recaptcha._alias_finish_reload = Recaptcha.finish_reload;
Recaptcha.finish_reload = function (challenge, b, c) {
    //Call original function that creates the new img
    Recaptcha._alias_finish_reload(challenge, b, c);

    $("#recaptcha_widget img").toggleClass('largecap', true);
}

//Called when the initial challenge is received on page load
Recaptcha._alias_challenge_callback = Recaptcha.challenge_callback;
Recaptcha.challenge_callback= function () {
    //Call original function that creates the new img
    Recaptcha._alias_challenge_callback();

    $("#recaptcha_widget img").toggleClass('largecap', true);
}

您甚至遇到此问题的原因是因为 Recaptcha 每次重新加载时都会破坏并创建一个新的 img，因此您手动添加的样式将会丢失。

Answer 2

$("#recaptcha_widget img").one('load',function(){
    $("#recaptcha_widget img").addClass('largecap');
    $('#recaptcha_image').css('height', '62px');
});

这将在您正在重新加载的图像的加载事件上设置一个一次性侦听器，然后执行以下代码。

我在这里使用了.one() 而不是.load()，因为你不想每次调用reloadCAP() 时都附加一个新的监听器

编辑

好的，这就是我认为的问题所在。当您致电 Recaptcha.reload() 时，它正在删除 <img /> 并用新的替换它。因此，当我们尝试附加事件时，它会随着图像被移除而被移除。

你需要做的是将类 largecap 放在 recaptcha_image div 上并修改你的 css 样式看起来像

.largecap img {
  height: whatever;
  width: whatever;
}

Answer 3

不是理想的解决方案，但您可以将 addClass 代码放在 Recaptcha.reload() 上方，然后将其延迟一两秒。

希望对您有所帮助。