Question

我只想在骨干视图上动态加载Google的reCaptcha，并且只添加一次脚本。

我设法在这里找到了一个非常有用的答案：https://stackoverflow.com/a/34533362/3847393，它在渲染视图时将脚本添加到视图中。但是，每次我离开该视图并返回到该视图时，它都会再次将该脚本添加到标题中。由于reCaptcha在我网站上的很多页面上，因此可以快速在代码头中添加很多重复的脚本。

在添加脚本之前，我尝试先检查脚本是否已经添加到DOM中，该脚本可以正常工作。但是，当离开页面导航并再次返回时，reCaptcha不会呈现。

loadCaptcha: function loadCaptcha(siteKey) {
    var self = this;

    window.renderCaptcha = function() {
        self.captchaWidgetId = grecaptcha.render('contactus-form-recaptcha', {
            sitekey: siteKey
        });
    };

    var scripts = $('#recaptcha-api-script');

    if (!scripts.length) {
        $('head:first').append('<script id="recaptcha-api-script" type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=renderCaptcha&render=explicit"><\/script>');
    }
}

我还尝试在最后更新脚本长度检查，并添加其他内容以尝试重新呈现reCaptcha：

if (!scripts.length) {
    $('head:first').append('<script id="recaptcha-api-script" type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=renderCaptcha&render=explicit"><\/script>');
} else {
    window.renderCaptcha();
}

但这会引发reCaptcha错误，提示占位符/ id丢失。

非常感谢您的帮助或指导。

在骨干网视图中加载一次reCaptcha脚本

0 个答案: