Не удается отобразить модуль reCaptcha более одного раза в моем приложении Polymer: Uncaught Ошибка: reCAPTCHA уже отображено в этом элементе - PullRequest
0 голосов
/ 08 мая 2019

Возникли проблемы с модулем reCaptcha в приложении Polymer 1.

Я могу использовать этот модуль один раз (в форме регистра), но если я попытаюсь использовать его на любом другом компоненте, это приведет к ошибке: Uncaught Error: 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:

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

Как я пытаюсь загрузить модуль рекапчи в другие компоненты:

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

Я ожидаю, что модуль можно импортировать и использовать в нескольких компонентах формы, но это приводит к ошибке, и виджет отказывается загружаться более одного раза.

1 Ответ

0 голосов
/ 08 мая 2019

Эта проблема была вызвана тем, что модуль не назначил уникальный идентификатор элементу reCaptcha заполнителя.Чтобы решить эту проблему, я создал свойство elementid, которое можно использовать для присвоения каждому рендеру элемента reCaptcha уникальный идентификатор.

<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>

Затем вы можете импортировать модуль и использовать пользовательский элемент где-либо еще.давая ему уникальный идентификатор.Вот так:

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