Возникли проблемы с модулем 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>
Я ожидаю, что модуль можно импортировать и использовать в нескольких компонентах формы, но это приводит к ошибке, и виджет отказывается загружаться более одного раза.