Добавьте виджет SmartCaptcha
Добавьте виджет SmartCaptcha расширенным методом
Вы управляете загрузкой виджета через объект window.smartCaptcha. В инструкции для этого используется callback-функция onloadFunction:
-
Подключите JS-скрипт к странице пользователя. Для этого разместите следующий код в любом месте страницы, например, внутри тега
<head>:<script src="https://smartcaptcha.yandexcloud.net/captcha.js?render=onload&onload=onloadFunction" defer ></script> -
Добавьте на страницу пустой контейнер, в который будет вставлен виджет:
<div id="<идентификатор_контейнера>"></div>Где
id— произвольный идентификатор. -
Добавьте на страницу код callback-функции:
<script> function onloadFunction() { if (window.smartCaptcha) { const container = document.getElementById('<идентификатор_контейнера>'); const widgetId = window.smartCaptcha.render(container, { sitekey: '<ключ_клиента>', hl: '<язык>', }); } } </script>Где:
<идентификатор_контейнера>— идентификатор, сгенерированный на предыдущем шаге;sitekey— ключ клиентской части;hl— язык виджета и задания.
В код callback-функции стоит добавить проверку существования объекта
window.smartCaptcha, чтобы не вызвать ошибку в случае вызова функции до завершения загрузки JS-скрипта.Примечание
При загрузке виджет меняет высоту контейнера, в котором он находится, на
100px. Это может привести к нежелательному «скачку» верстки на странице из-за изменения высоты. Чтобы избавиться от этого «скачка», вы можете задать до загрузки виджета высоту контейнера100px.<div ... style="height: 100px"></div>
Добавьте виджет SmartCaptcha при необходимости
Чтобы добавить виджет и загружать капчу при необходимости, используйте следующий подход:
window.onloadFunction = () => {
if (window.smartCaptcha) {
// Создание капчи
}
}
function handleScriptLoadingError() {
// Обработка ошибок
}
const scriptElement = document.createElement('script');
scriptElement.src = 'https://smartcaptcha.yandexcloud.net/captcha.js?render=onload&onload=onloadFunction';
scriptElement.onerror = handleScriptLoadingError;
document.body.appendChild(scriptElement);