Google reCAPTCHA 在 Fancybox 中不起作用答案

【问题标题】：Google reCAPTCHA not working in FancyboxGoogle reCAPTCHA 在 Fancybox 中不起作用
【发布时间】：2015-04-24 06:38:23
【问题描述】：

我正在尝试在模型弹出窗口中使用新的谷歌 reCAPTCHA 和幻想框（在本地主机中），但它没有出现。有什么想法吗？

var html = "<form method='post'><input type='text' name='nombre' autofocus required placeholder='Escribe tu nombre'/><br><input type='mail' name='mail' placeholder='Escribe tu correo'><br> <input type='tel' name='telefono' placeholder='Escribe tu teléfono'/><br><textarea  rows='5' cols='35' name='mensaje' required placeholder='Escribe tu mensaje'/></textarea><br><div align='center' class='g-recaptcha' data-theme='dark' data-sitekey='XXXX'></div> <input type='checkbox' required name='condiciones' value='condiciones' /> Acepto las <a href='/wordpress/politica-de-privacidad' target='_blank'>condiciones de uso</a> <br /><input type='submit' value='Enviar' /></form>";
        $(".contacto").fancybox({
            'width': 600,
            'height': 500,
            'autoSize': false,
            type: "html",
            content: html,
            helpers: {
                overlay: {
                    locked: false,
                    css: {
                        'background': 'rgba(0, 0, 0, 0.55)',    
                    }
                }
            }
        });

【问题讨论】：

显示验证码的代码在哪里？
验证码在“var html”中。
我只看到一个相关的 DIV 类：<div align='center' class='g-recaptcha'...
在谷歌文档 (developers.google.com/recaptcha/docs/display) 中说，使用这个类并添加 js 就可以了：$

标签： jquery forms recaptcha fancybox-2

【解决方案1】：

看起来您需要在使用目标验证码元素创建 Fancybox 后动态呈现 ReCAPTCHA。因此，请确保您已包含必要的 javascript (https://www.google.com/recaptcha/api.js?render=explicit)，然后像这样使用渲染函数：

grecaptcha.render(
'targetelement', {
'sitekey' : 'XXXX',
'theme' : 'dark'
}
);

【讨论】：

我在表单中添加了这个脚本和 id 以及目标元素，但不起作用，
@ElHombreSinNombre 你能贴出你用过的代码吗？

【解决方案2】：

@Muggles ，我的新代码。您可以在 Sublime Text（或其他文本编辑器）中复制和粘贴。

<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css">
</head>
<body>
    <a class="contacto">Contacto</a>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var onloadCallback = function () {
                grecaptcha.render('html_element', {
                    'sitekey': '6LflpAUTAAAAANmiwCBqE_EdNVkOitOFmGLoc9LG'
                });
            };
            var html = "<form method='post'> <div id='html_element'></div></form>";
            $(".contacto").fancybox({
                'width': 600,
                'height': 500,
                'autoSize': false,
                type: "html",
                content: html,
                helpers: {
                    overlay: {
                        locked: false,
                        css: {
                            'background': 'rgba(0, 0, 0, 0.55)',

                        }
                    }
                }
            });
        });
    </script>
</body>
</html>

【讨论】：

我用“display:none”和 ID 解决了在 HTML 中添加表单的问题。在 javascript 代码中，我将此 id 放在 $html 变量中。如果有必要我会放完整的代码。