Инструкция по использованию скрипта автоматического клика
-
В рабочую область необходимо добавить виджет таблица и подключить его к источнику данных.Добавить виджет “Строка” и остальные необходимые вам компоненты конструктора таблиц, включая виджет “Чекбокс” (см. WIKI Настройка виджета "Конструктор таблиц” )
-
Далее в footer слот нашей таблицы нам необходимо поместить виджет “Текст”.
В расширенном редакторе виджета текст на вкладке HTML вставляем код:
<img src=“несуществующая_картинка” style=“display: none;” onerror="
const observer = new MutationObserver(function() {
const elements = document.querySelectorAll(‘label[data-v-2167fa20]’);
if (elements.length > 0) {
elements.forEach(function(el, index) {
el.click();
console.log('
Клик выполнен по элементу ’ + (index + 1));
});
observer.disconnect();
}
observer.observe(document.body, { childList: true, subtree: true });
console.log(‘
Ожидаем появления элементов…’);
">
Клик выполнен по элементу ’ + (index + 1));
Ожидаем появления элементов…’);- Далее переходим в плеер и с помощью DevTools (инструменты разработчика) на вкладке Elements выберите элемент label на странице с помощью иконки курсора
- Выбор label
- Далее на вкладке Elements необходимо скопировать атрибут тега label и вставить его в наш код в виджете “Текст”( с сохранением синтаксиса из примера выше):
Далее при запуске страницы в плеере наши чекбоксы будут активными,а на вкладке Console будет отображаться,что клик по элементу выполнен
Разбор кода:
1. Тег ![]()
с ошибкой
<img src=“несуществующая_картинка” style=“display: none;” onerror=“…”
src=“несуществующая_картинка” — ссылка на несуществующее изображение, что гарантированно вызовет ошибку загрузки.
style=“display: none;” — изображение скрыто, пользователь его не видит.
onerror=“…” — обработчик события ошибки. Когда браузер не может загрузить картинку, он выполняет этот код. Таким образом, скрипт запускается автоматически.
2.Создание MutationObserver
const observer = new MutationObserver(function() { … }
);
MutationObserver — это встроенный API браузера, который следит за изменениями в DOM-дереве (добавление/удаление элементов, атрибутов и т.д.).
Внутри передана callback-функция, которая выполняется каждый раз, когда DOM меняется.
3.Поиск и клик по элементам label
const elements = document.querySelectorAll(‘label[data-v-2167fa20]’);
if (elements.length > 0) {
elements.forEach(function(el, index) {
el.click();
console.log('
});
observer.disconnect();
}
Ищет все теги label с атрибутом data-v-2167fa20
Если такие элементы найдены:
-
По каждому из них программно вызывает клик (.click()).
-
Выводит в консоль сообщение об успехе.
-
Отключает observer (observer.disconnect()) — дальнейшее слежение прекращается.
4. Запуск наблюдения
observer.observe(document.body, { childList: true, subtree: true });
console.log(‘
Начинает следить за изменениями во всём документе (document.body).
Параметры:
-
childList: true — следить за добавлением/удалением дочерних элементов.
-
subtree: true — следить за всеми вложенными элементами на любом уровне.
-
Выводит сообщение в консоль, что наблюдатель запущен.