Программно вызвать событие ссылки

@JSJuni · Регистрация: 19.01.2019

Студворк — интернет-сервис помощи студентам

Добрый день.
имеется необходимость организовать автоматическое нажатие на кнопки некоторой страницы html,
нажимать нужно на элементы такого плана - это ссылка, при нажатии на которую открывается форма заполнения отклика:
код одного из элементов приведен ниже.

JavaScript
1
<a href="/applicant/vacancy_response?vacancyId=28633561" class="bloko-link bloko-link_dimmed HH-VacancyResponsePopup-Link" data-qa="vacancy-serp__vacancy_response">Откликнуться</a>

в простом случае получения элемента по "id", удаётся без проблем вызвать его событие.

HTML5
1
2
3
4
5
6
7
<a id="4" href="#" onclick="alert('Пример 1 сработал'); return false;">Пример 1</a>
    <script>
        var buton = document.getElementById(3);
        //buton.onclick();
        var href = document.getElementById(4);
        href.onclick();
    </script>

а как быть с первым вариантом кода, когда элемент "href" не имеет явных "id" и каких бы то ни было опознавательных знаков кроме класса и непосредственно "a href="/applicant/vacancy_response?vacancyId=28633561"?
Как получить этот элемент "href"?

Добавлено через 20 минут
такой код аналогично не приводит к нужному результату:

var array = [];
var links = document.getElementsByTagName("a");
alert(links.length);
// попытка вызвать все ссылки
for(var i=0, max=links.length; i<max; i++) {
try {
alert(links[i].href);
links[i].onclick;
array.push(links[i].href);

} catch (err) {
alert(err.message);

}

}
первые алерты отрабатывает, ошибок нету
но ссылки не нажимаются.
Как нажать все необходимые ссылки на странице, ну а потом уже и те которые в первом посте?

@amr-now · 19.01.2019, 19:42

По первой половине списка вопросов:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <a href="javascript:alert('Первая ссылка!');" class="bloko-link bloko-link_dimmed HH-VacancyResponsePopup-Link"
        data-qa="vacancy-serp__vacancy_response">Откликнуться 1</a><br />
    <a href="javascript:alert('Вторая ссылка!');" id="4" data-qa="vacancy-serp__vacancy_response">Откликнуться 2</a><br />
    <a href="http://ya.ru" id="4" data-qa="vacancy-serp__vacancy_response">Откликнуться 3</a><br />
    <input type="button" id="btn1" value="Кнопка 1">
    <input type="button" id="btn2" value="Кнопка 2">
    <input type="button" id="btn3" value="Кнопка 3">
    <script>
 
        var btn1 = document.getElementById("btn1"),
            btn2 = document.getElementById("btn2"),
            btn3 = document.getElementById("btn3");
        // По классу
        btn1.onclick = () => { document.querySelector(".HH-VacancyResponsePopup-Link").click(); };
        // По Id
        btn2.onclick = () => { document.getElementById("4").click(); };
        // Элемент "a" не имеет явных "id" и каких бы то ни было опознавательных знаков, кроме href
        btn3.onclick = () => { document.querySelector("a[href*='ya.ru']").click(); };
    </script>
</body>
</html>

@shsv382 · 19.01.2019, 22:20

Ну делать 1.onclick = 2.onclick() не очень правильно. Вам нужно использовать dispatchEvent:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
const id = "34567";
let button = document.getElementById(id);
button.onclick = (e) => {
  // создаем новое событие "click"
  let newEvent = new Event("click");
 
  // получаем нужную ссылку, id ссылки и id кнопки, как я понимаю, должны совпадать
  let anchor = document.querySelector(`a[href="/applicant/vacancy_response?vacancyId=${id}"]`);
 
  // применяем его на нужной ссылке
  anchor.dispatchEvent(newEvent);
}

p.s. код писал вслепую, в боевых условиях не проверял. Из теории почитайте про:
1. Составные селекторы вида ".someclass[attr='value']"
2. Создание собственных событий (new Event())
3. Применение событий на элементах DOM (dispatchEvent)

@JSJuni · 20.01.2019, 01:20 **[ТС]**

ёк.
будем читать.
т.е. верно я понял, что задача может быть реализована и нужно продолжать копать ?

@shsv382 · 20.01.2019, 08:25

Абсолютно. Вот вам ссылочка в довесок https://learn.javascript.ru/dispatch-events

@kalabuni · 20.01.2019, 09:35

Сообщение от JSJuni

т.е. верно я понял, что задача может быть реализована и нужно продолжать копать ?

если программно кликать собираетесь по ссылкам собственной страницы, то всё верно
если же желаете покликать по ссылкам чужой страницы, то разочарую вас -- в сети это невозможно из-за правила ограничения домена

для чужих страниц можно реализовать вами желаемое только для конкретного браузера конкретного компьютера

@JSJuni · 20.01.2019, 09:41 **[ТС]**

Сообщение от kalabuni

для чужих страниц можно реализовать вами желаемое только для конкретного браузера конкретного компьютера

я бы хотел к примеру сначала все это запустить
через f12:
Чужая страница отображается в моем конкретном браузере на моем же конкретном компьютере,
а потом обкатанный скрипт запихать в гризи манки, для использования на этом же компьютере, но страницы будут динамические, но домен один , типа вот страницы ютуба, ониж все разные - под каждую конкретную страницу писать это не реально мне каж. или можно скрипт менять динамически под каждую страницу на крайний случай - так получится?
мне нужно тупо рассылку по кнопкам сделать или как-то оптимизировать рассылку.

Добавлено через 2 минуты
в общем смысл , делаю запрос, получаю страницу с сылками, нажимаю на ссылку открывается окошко в это окошко нужно ввести текст и нажать "отправить" в этом же окошке, далее
перейти на следующую подходящую ссылку первой страницы и повторить операцию.
Все это в конкретно моем браузере.
Это возможно организовать javascript-ом?
то не противоречит никакой политике?
или тут нужно на C++ программировать свой браузер?

@kalabuni · 20.01.2019, 12:00

нет, C++ не нужен
обезьянка (+ ваш js-файл для неё) вполне справятся
но по-любому вам придётся научиться программно отыскивать нужные вам ссылки, поля для ввода и кнопки в HTML-коде "чужой" страницы по каким-то их признакам: либо по набору уникальных атрибутов тегов этих элементов, либо по местоположению (окружению) этих тегов в коде

SkyderTM · 20.01.2019, 14:02

JSJuni, банально просто прощелкать все ссылки так:

JavaScript
1
2
3
4
5
6
7
                var links=document.getElementsByTagName('a');
        for(var i=0;i<links.length;i++){
            var thisHref=links[i].getAttribute('href');
            if(thisHref.indexOf('') ){// Здесь любое условия по href, ну или можете не по любому другому атрибуту выборку делать
              links[i].click();
            }
        }

С кнопками - аналогично.
Критерий выборки надо анализировать по странице, что будите парсить)

@JSJuni · 24.01.2019, 13:03 **[ТС]**

коллеги, всем привет еще раз.
у меня такой дурацкий вопрос:
Необходимо получить доступ к телу открываемого окна из вызывающего кода, в данном случае это кажется попуп окно или форма.
Каким образом необходимо инициировать событие нажатие Кнопки_Ссылки чтобы получить тело открытой формы?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
var links = document.getElementsByTagName('a');
var countOfLinns = 0;
for (var i = 0; i < links.length; i++) {
 
    var thisHref = links[i].getAttribute('href');
 
    if (thisHref.indexOf("/applicant/Test")>=0) {
       SmallWindow = links[i].click(); // тут открываю ссылку - маленькое окно такое
        countOfLinns++;
    }
}
alert(countOfLinns);
/////////// SmallWindow = undefined

@shsv382 · 24.01.2019, 13:09

Всплывающее окно с фреймом или просто модальное окно с диалогом?

Добавлено через 29 секунд
JSJuni, Всплывающее окно с фреймом или просто модальное окно с диалогом?

@JSJuni · 24.01.2019, 15:07 **[ТС]**

точно не всплывающее

HTML5
1
2
3
    <div class="bloko-modal" data-attach="modal"><div class="vacancy-response-popup-wrapper"><form method="post" action="/applicant/vacancy_response/popup?vacancy_id=29775716" class="vacancy-response-popup HH-VacancyResponsePopup-Form HH-SubmitDisabler-Form"><div class="bloko-modal-header bloko-modal-header_outlined"><h2 class="bloko-modal-title">Отклик на вакансию</h2><div>«Программист 1С»</div></div><div class="vacancy-response-popup-body"><input type="hidden" name="letterRequired" value="false"><div class="bloko-form-row"><div class="bloko-form-item"><div class="vacancy-response-popup-subtitle">Резюме для отклика</div></div><div class="vacancy-response-popup-resume vacancy-response-popup-resume_single HH-VacancyResponsePopup-Resume vacancy-response-popup-resume_selected"><div class="vacancy-response-popup-resume__title"><span class="vacancy-response-popup-resume__input"><input type="hidden" name="resume_hash" value="293e6d2eff03d70de30039ed1f34426e636d36" class="HH-VacancyResponsePopup-Resume-Hidden" data-response-disabled="false"><span data-qa="resume-title">IT директор, ведущий программист 1с, архитектор 1с</span></span><a href="/resume/293e6d2eff03d70de30039ed1f34426e636d36" class="vacancy-response-popup-resume__link" target="_blank" data-qa="vacancy-response-view-resume">Посмотреть резюме</a></div></div></div><div class="bloko-toggle HH-VacancyResponse-Popup-ToggleBlock"><script data-name="HH/Bloko/Toggle" data-params=""></script><span class="bloko-toggle__expandable-reverse"><span class="bloko-link-switch" data-toggle="" data-qa="vacancy-response-letter-toggle">Сопроводительное письмо</span></span><div class=" bloko-toggle__expandable"><div class="bloko-form-item"><div class="vacancy-response-popup-subtitle">Сопроводительное письмо</div></div><textarea name="letter" rows="6" maxlength="10000" class="bloko-textarea bloko-textarea_sized-rows HH-VacancyResponsePopup-Letter "></textarea></div></div></div><div class="bloko-modal-footer"><span class="g-hidden HH-VacancyResponsePopup-Error vacancy-response-popup-error" data-hh-vacancy-response-popup-error="unknown">Произошла ошибка, попробуйте ещё раз</span><span class="g-hidden HH-VacancyResponsePopup-Error vacancy-response-popup-error" data-hh-vacancy-response-popup-error="letter-required">Пожалуйста, введите сопроводительное письмо</span><span class="g-hidden HH-VacancyResponsePopup-Error vacancy-response-popup-error" data-hh-vacancy-response-popup-error="test-required">Для отклика требуется ответить на вопросы теста</span><span class="g-hidden HH-VacancyResponsePopup-Error vacancy-response-popup-error" data-hh-vacancy-response-popup-error="test-service-down">Извините, сайт перегружен, пожалуйста, попробуйте позже</span><span class="g-hidden HH-VacancyResponsePopup-Error vacancy-response-popup-error" data-hh-vacancy-response-popup-error="negotiations-limit-exceeded">В течение 24 часов можно совершить не более 200 откликов. Вы исчерпали лимит откликов, попробуйте отправить отклик позднее.</span><span class="g-hidden HH-VacancyResponsePopup-Error vacancy-response-popup-error" data-hh-vacancy-response-popup-error="too-long-letter">Длина сопроводительного письма не может превышать <letter-max-length>10000</letter-max-length> символов</span><span class="bloko-button HH-VacancyResponsePopup-Cancel">Отмена</span><div class="bloko-form-spacer"><button type="submit" class="bloko-button                                bloko-button_primary                                HH-VacancyResponsePopup-Submit                                HH-SubmitDisabler-Submit" data-qa="vacancy-response-submit-popup"><span class="bloko-button__content">Откликнуться</span><span class="bloko-button__loading"><span class="bloko-icon bloko-icon_loading bloko-icon_initial-primary"></span></span></button></div></div><input type="hidden" name="_xsrf" value="24455fbd26e39b66522435a3d5863382"></form>
</div></div>
    <div class="bloko-modal-close-button Bloko-Modal-CloseButton" data-qa="bloko-modal-close"></div>

Добавлено через 2 минуты
а как узнать какое оно?

SkyderTM · 24.01.2019, 15:45

JSJuni, покажите как вы его вызываете. Тогда будет проще сказать, как и что получить.

@JSJuni · 24.01.2019, 15:53 **[ТС]**

собственно я лишь взял код приведенный выше.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
var links = document.getElementsByTagName('a');
var countOfLinns = 0;
for (var i = 0; i < links.length; i++) {
 
    var thisHref = links[i].getAttribute('href');
 
    if (thisHref.indexOf("/applicant/vacancy_response")>=0) {
       a=links[i].click();
        countOfLinns++;
    }
}
alert(countOfLinns);

вызываю я его так,
но как узнать куда именно кнопка шлет данные,
как составить правильный XthtpЗапрос?
все вроде бы около , но собрать воедино не получается.

SkyderTM · 24.01.2019, 16:35

JSJuni,
thisHref
Эта переменная содержит весь href ссылки.
Если в начале стоит относительный путь через точки и слеш, то нужно просто проанализировать его и подставить необходимую информацию. Отправить через запрос и получить информацию.

Что касается кнопок, то тут много вопросов:
1. кнопка является просто внешним отображением ссылки(например, находится в <a></a> - тогда анализируем ссылку(хотя он откроется в проходе цикла выше)
2. Кнопка имеет свой JS обработчик(тогда надо его анализировать)
3. Кнопка является кнопкой submit, что отправляет данные через форму, тогда надо анализировать форму, к которой она относиться(к слову, обработчик JS может стоять и на такой кнопке)

@kalabuni · 25.01.2019, 17:52

Сообщение от SkyderTM

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

ничего анализировать" и "подставлять" не надо!

для ссылки <a href="путь">
свойство ссылка.href вернёт абсолютный путь вне зависимости от того, какой путь в атрибуте указан: абсолютный или относительный

а вот для того, чтобы получить именно то, что написано в этом атрибуте в HTML-коде, конструкция будет чуть длиннее:
ссылка.getAttribute ('href')

SkyderTM · 25.01.2019, 19:50

kalabuni, да, действительно так. Однако в моем примере используется getAttribute.
Почему через getAttribute? - потому что в топе просили не только ссылки, но и кнопки, т.е. есть возможно понадобятся другие атрибуты(что-то вроде универсального способа).

Для топикастера(JSJuni) - вернее всего с ссылками сделать как указано выше.

@JSJuni · 26.01.2019, 10:35 **[ТС]**

коллеги, всем спасибо.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@JSJuni 2 / 2 / 0 Регистрация: 19.01.2019 Сообщений: 33
	20.01.2019, 01:20 [ТС]
	ёк. будем читать. т.е. верно я понял, что задача может быть реализована и нужно продолжать копать ? 0

@shsv382 108 / 76 / 27 Регистрация: 14.11.2016 Сообщений: 260
	20.01.2019, 08:25
	Абсолютно. Вот вам ссылочка в довесок https://learn.javascript.ru/dispatch-events 1

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	20.01.2019, 12:00
	нет, C++ не нужен обезьянка (+ ваш js-файл для неё) вполне справятся но по-любому вам придётся научиться программно отыскивать нужные вам ссылки, поля для ввода и кнопки в HTML-коде "чужой" страницы по каким-то их признакам: либо по набору уникальных атрибутов тегов этих элементов, либо по местоположению (окружению) этих тегов в коде 1

@shsv382 108 / 76 / 27 Регистрация: 14.11.2016 Сообщений: 260
	24.01.2019, 13:09
	Всплывающее окно с фреймом или просто модальное окно с диалогом? Добавлено через 29 секунд JSJuni, Всплывающее окно с фреймом или просто модальное окно с диалогом? 0

SkyderTM 11 / 9 / 2 Регистрация: 23.01.2017 Сообщений: 56
	24.01.2019, 15:45
	JSJuni, покажите как вы его вызываете. Тогда будет проще сказать, как и что получить. 0

SkyderTM 11 / 9 / 2 Регистрация: 23.01.2017 Сообщений: 56
	24.01.2019, 16:35
	JSJuni, thisHref Эта переменная содержит весь href ссылки. Если в начале стоит относительный путь через точки и слеш, то нужно просто проанализировать его и подставить необходимую информацию. Отправить через запрос и получить информацию. Что касается кнопок, то тут много вопросов: 1. кнопка является просто внешним отображением ссылки(например, находится в <a></a> - тогда анализируем ссылку(хотя он откроется в проходе цикла выше) 2. Кнопка имеет свой JS обработчик(тогда надо его анализировать) 3. Кнопка является кнопкой submit, что отправляет данные через форму, тогда надо анализировать форму, к которой она относиться(к слову, обработчик JS может стоять и на такой кнопке) 1

SkyderTM 11 / 9 / 2 Регистрация: 23.01.2017 Сообщений: 56
	25.01.2019, 19:50
	kalabuni, да, действительно так. Однако в моем примере используется getAttribute. Почему через getAttribute? - потому что в топе просили не только ссылки, но и кнопки, т.е. есть возможно понадобятся другие атрибуты(что-то вроде универсального способа). Для топикастера(JSJuni) - вернее всего с ссылками сделать как указано выше. 1

@JSJuni 2 / 2 / 0 Регистрация: 19.01.2019 Сообщений: 33
	26.01.2019, 10:35 [ТС]
	коллеги, всем спасибо. 0