Question

在Polymer 1应用程序中使用reCaptcha模块时遇到问题。

我可以一次使用此模块（在注册表中），但是如果尝试在其他任何组件上使用它，则会导致错误：未捕获的错误：reCAPTCHA已在此元素中呈现。

最初认为问题是因为我在模块内加载了Recaptcha脚本，所以将其移至index.html。但是问题仍然存在。
在各种位置尝试使用grecaptcha.reset（）卸载小部件，以便可以在其他组件中进行渲染。

在recaptcha-module-html内部：

<dom-module id="recaptcha-module">
    <template>
        <div class="captcha-container">
            <div id="captcha"></div>
        </div>
    </template>
    <script>
        Polymer({
            is: "recaptcha-module",
            ready: function () {
                this.recaptchaCallback = this.recaptchaCallback.bind(this)
                this.recaptchaExpired = this.recaptchaExpired.bind(this)
                window.recaptchaCallback = this.recaptchaCallback
                window.recaptchaExpired = this.recaptchaExpired
            },

            attached: function () {
                grecaptcha.render('captcha', {
                    'sitekey': {SITE_KEY_HERE}
                    'size': 'compact',
                    'callback': 'recaptchaCallback',
                    'expired-callback': 'recaptchaExpired'
                });
            },

            recaptchaCallback: function () {
                this.fire('recaptcha-success')
            },

            recaptchaExpired: function () {
                this.fire('recaptcha-expired')
            }

        });
    </script>
</dom-module>

在index.html中加载recaptcha脚本：

  <script src="https://www.google.com/recaptcha/api.js">
  </script>

我如何尝试在其他组件中加载recaptcha模块：

<link rel="import" href="recaptcha-module.html">
...
<recaptcha-module></recaptcha-module>

我希望该模块可以导入并用于多种形式的组件，但这样做会导致错误，并且小部件拒绝多次加载。

Answer 1

之所以引起此问题，是因为该模块未为占位符reCaptcha元素分配唯一的ID。为了解决该问题，我创建了一个名为elementid的属性，该属性可用于为reCaptcha元素的每个渲染提供唯一的ID。

<dom-module id="recaptcha-module">
    <template>
        <div class="captcha-container">
            <div class="captcha" id="[[elementid]]"></div>
        </div>
    </template>
    <script>
        Polymer({
            is: "recaptcha-module",
            properties: {
                elementid : String,
                captchastyle : String
            },
            ready: function () {
                this.recaptchaCallback = this.recaptchaCallback.bind(this)
                this.recaptchaExpired = this.recaptchaExpired.bind(this)
                window.recaptchaCallback = this.recaptchaCallback
                window.recaptchaExpired = this.recaptchaExpired
            },

            attached: function () {
                grecaptcha.render(this.elementid, {
                    'sitekey': {MY_SITE_KEY},
                    'size': this.captchastyle,
                    'callback': 'recaptchaCallback',
                    'expired-callback': 'recaptchaExpired'
                });
            },

            recaptchaCallback: function () {
                this.fire('recaptcha-success')
            },

            recaptchaExpired: function () {
                this.fire('recaptcha-expired')
            }

        });
    </script>
</dom-module>

然后，您可以导入模块，并通过为其提供唯一的ID来使用自定义元素。像这样：

<recaptcha-module elementid="UNIQUE_ID" captchastyle="normal"></recaptcha-module>

无法在我的Polymer应用程序上多次渲染reCaptcha模块：未捕获的错误：reCAPTCHA已在此元素中渲染

1 个答案: