Как запустить функцию сразу после загрузки скрипта?

Question

[Алена Алехина]

Всем привет)
Пытаюсь разобраться с невидимой капчой от яндекса.
В инструкции написано подключить скрипт



вопрос такой, я же правильно понимаю, что в параметре onload прописана функция, которая должна запускаться сразу после загрузки скрипта? Почему то у меня это не срабатывает и подумал может не так что то поняла. В инете почему то не нашла инфы по поводу такого метода. Могу ли я тогда просто в скрипте вызывать функцию эту?

Comments

[historydev]

Где скрипт? Где вызываете?

[Алена Алехина]

Владимир, ой, не увидела что скрипт не отображается в вопросе) прикрепила скрином
Подключаю скрипт в footer. По инструкции саму функцию onlaodFunction нужно объявить в js файле, который уже подключен к странице.

[historydev]

Алена Алехина, вы подключили её, где объявляете?
https://cloud.yandex.ru/docs/smartcaptcha/concepts...

[Алена Алехина]

Владимир, да, по этой ссылке все и делаю.

Скрипт с капчой подключаю в footer после всех остальных скриптов.
Внутрь формы помещаю контейнер с id captcha-container. Функции onloadFunction, callback и handleSubmit помещаю в конце скрипта script.js(он подключается так же в footer выше captcha.js).
handleSubmit вызываю при событии отправки формы. При отправке формы получаю ошибку:

captcha.js?render=onload&onload=onloadFunction:2 Uncaught Error: Widget with id 0 does not exist

Собственно с этого и начались мои копания, что как и когда должно запускаться) Вот и обратила внимание на параметр onload в подключении скрипта и относительно этого появились вопросы.

[historydev]

Алена Алехина, покажите весь код.

[Алена Алехина]

Владимир,

html:

<form action="" class="how-much__form req-form lazyload" id="req3_form" data-src="{$aTemplate.path}img/order-bg.jpg">
		<div class="container">
			<div class="how-much__form-title">Узнайте сколько стоит ваш ремонт</div>
			<div class="row-flex">
				<div class="col-4">
					<input type="text" class="opacity-input" placeholder="Ваше имя" id="req3_fio" name="req3_fio" required />
				</div>
				<div class="col-4">
					<input type="text" class="opacity-input phoneMask" placeholder="Ваш телефон" id="req3_phone" name="req3_phone" required />
				</div>
				<div class="col-4 submit-btn form-submit">
					<button class="white-btn send_form_btn" type="submit">Узнать стоимость работ</button>
					<input type="hidden" name="ftype" value="wantcost" />
					<input type="hidden" name="type" value="req1" />
					<input type="hidden" id="req3_errors" value="1" />
				</div>
				<div class="col-12">
					<div class="form-agree form-block">
						<div class="help-in">
							<input type="checkbox" class="custom-checkbox" id="req3_agree" name="req3_agree" value="on" required="" />
							<label for="req3_agree"><span><a data-fancybox="" data-src="#modal-agree" href="javascript:;" data-modal="true">Согласен</a> на обработку персональных данных в соответствии с <a target="_blank" href="/agreement/">пользовательским соглашением</a></span></label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="captcha-container"></div>
	</form>

footer:

<script defer src="{$aTemplate.path}js/script.min.js?{filemtime("`$aTemplate.template_path`js/script.min.js")}"></script>
		<script
				src="https://captcha-api.yandex.ru/captcha.js?render=onload&onload=onloadFunction"
				defer
		></script>

script.js(в самом конце):

function onloadFunction() {
		if (!window.smartCaptcha) {
			return;
		}

		var container = $('#captcha-container');

		window.smartCaptcha.render(container, {
			sitekey: '<Ключ_клиентской_части>(подставляю нужный)',
			invisible: true,
			callback: callback,
		});
	}

	function callback(token) {
		console.log(token);
	}

	function handleSubmit() {
		if (!window.smartCaptcha) {
			return;
		}

		window.smartCaptcha.execute();
	}

	$('#req3_form').on('submit', function(e) {
		handleSubmit();
	})

[historydev]

Алена Алехина, попробуйте поменять местами
1. script.js(в самом конце):
2.

<script
        src="https://captcha-api.yandex.ru/captcha.js?render=onload&onload=onloadFunction"
        defer
    ></script>

[historydev]

Алена Алехина, вы ещё обычное апи подключаете, верно? Откуда в глобал попадают эти методы:
window.smartCaptcha.render

[historydev]

Алена Алехина, либо добавьте defer сюда: script.js(в самом конце), как здесь:

<script
        src="https://captcha-api.yandex.ru/captcha.js?render=onload&onload=onloadFunction"
        defer
    ></script>