在其他所有内容完成加载后加载Recaptcha

时间:2014-02-13 23:38:53

标签: javascript recaptcha

使用Recaptcha的默认方式是:

<script src="http://www.google.com/recaptcha/api/challenge?k=publickey"></script>

您希望Recaptcha出现在哪里。但是,我希望它出现在页面的中间,但我不希望它阻止页面的其余部分。

如何最后加载Recaptcha?

我加载了jQuery。

1 个答案:

答案 0 :(得分:1)

在JQuery中找到了这段代码。文档准备就绪后,表示页面已满载。

// WHEN THE DOM HAS LOADED FIRE THE reCapInsert FUNCTION TO INSERT THE reCAPTCHA
$( document ).ready(function(){
    reCapInsert();
});

// WHEN CALLED THIS INSERTS THE reCAPTCHA INTO THE PAGE
function reCapInsert(){
    Recaptcha.create('YOUR_PUBLIC_KEY_HERE',  // public key
    'recap',
        {
            theme: 'clean',
            callback: Recaptcha.focus_response_field
        }
);
}

您在HTML页面中真正做的就是放置此代码,它将在该位置生成一个ReCaptcha。 (不要忘记在页面的标题中包含recaptcha javascript。)

   <!-- The reCAPTCHA wrapper is here - this is required!! -->
    <div id="recap"></div>

找到了由$(document).ready()

加载的非Ajax版本的示例
$(document).ready(function(){
    var json = {
        type: "text/javascript",
        scriptSrc: "http://www.google.com/recaptcha/api/challenge?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n",
        id: "theFrame",
        iframeSrc: 'http://www.google.com/recaptcha/api/noscript?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n'
    };

    var script = document.createElement('script');
    script.type = json.type;
    script.src = json.scriptSrc;

    $('<iframe>', {
       src: json.iframeSrc,
       id:  json.id,
       frameborder: 0,
        height: 300,
        width: 500
       }).appendTo('#recap');
});

JSFiddle:JSfiddle

有关详细信息,请查看原始来源:Mixing jQuery and reCaptcha