Изначально передо мной стояла задача «сделать так, чтобы при входе на сайт сразу открывалось окошко с нужной информацией». Поскольку у сайте не предусмотрен поиск по параметрам из адресной строки, мне пришлось завести отдельную переменную serial, которую я указывал в адресе и присваивал ей серийный номер для поиска:
?serial=A01234B5C67890
Т.о. примерный алгоритм был такой:
1. Открываем страницу по ссылке, в конце которой добавлен серийный номер
2. При открытии страницы заполняется поле «Введите серийный номер продукта в поле поиска», при этом данные берутся из адресной строки
3. Нажимается кнопка «Поиск»
Для автоматизации подобных задач прекрасно подошло расширение Tempermonkey.
Проблема в том, что скрипт «не нажимал» кнопку. Может быть, если бы это была ссылка в виде кнопки, а не элемент «button», всё бы получилось, но у меня скрипт не работал:
// ==UserScript==
// @name SearchSerial
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author DenTNT
// @match https://ippon.ru/support/help/?serial=
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant none
// ==/UserScript==
(function() {
'use strict';
const params = new URLSearchParams(window.location.search);
let inputField = document.querySelector("#searchSerial");
if (inputField)
{
console.log(inputField);
}
inputField.value = params.get("serial");
let submitButton = document.querySelector("#searchSerialButton");
if (submitButton)
{
console.log(submitButton);
submitButton.click();
console.log("Button pressed");
}
})();
В логе консоли видно, что кнопка успешно найдена и вроде как нажата, но форма не отправилась, а значит нужного эффекта я не достиг.
Как я не пытался, я не смог заставить кнопку нажиматься. Пришлось пойти другим путём — при нажатии на кнопку срабатывает некоторое событие. Его можно увидеть в Инспекторе, если выбрать эту кнопку:
При нажатии данной кнопки будет запущен скрипт js, который отправляет на сервер JSON-запрос, телом которого выступает переменная serial, которой мы должны присвоить значение из поля searchSerial.
Таким образом я изменил скрипт, и теперь он не «нажимал» кнопку, а сразу выполнял и обрабатывал JSON-запрос:
// ==UserScript==
// @name ParseSerial
// @namespace http://tampermonkey.net/
// @version 0.2
// @description try to take over the world!
// @author DenTNT
// @match https://ippon.ru/support/help/?serial=*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant none
// ==/UserScript==
const params = new URLSearchParams(window.location.search);
var inputField = document.querySelector("#searchSerial");
if (inputField)
{
console.log(inputField);
}
inputField.value = params.get("serial");
// ***** Код из кнопки ****
//() => {
var formData = new FormData();
formData.append('serial', document.getElementById("searchSerial").value);
$.ajax({
url: '/support/help/serial.php',
data: formData,
processData: false,
contentType: false,
type: 'POST',
success: function(data) {
console.log(data)
if (data.ncode == null) {
$.fancybox.open('<div><div class="clear40"></div><p>По данному номеру определить продукт не удалось. Воспользуйтесь выбором товара из списка</p><div class="clear80"></div></div>');
} else if (data.brand != 'IPPON') {
$.fancybox.open('<div><div class="clear40"></div><p>По данному номеру определить продукт не удалось. Воспользуйтесь выбором товара из списка</p><div class="clear80"></div></div>');
} else {
let html = '<div><div class="clear20"></div>';
html += '<h1>' + data.full_name + '</h1><div id="productInfoBySerial"><div class="clear20"></div>';
html += '<table class="popupTable">';
html += '<tr><td>Полное наименование</td><td><div class="popupTextareaWrapper"><textarea>' + ((data.merlion_name) ? data.merlion_name : data.full_name) + '</textarea></div></td></tr>';
html += '<tr><td>Артикул</td><td><input type="text" value="' + data.model + '"></td></tr>';
html += '<tr><td>Код</td><td><input type="text" value="' + data.id + '"></td></tr>';
html += '<tr><td>Серийный номер</td><td><input type="text" value="' + data.sn + '"></td></tr>';
html += '<tr><td>Ревизия</td><td><input type="text" value="' + data.hardware_revision + '"></td></tr>';
html += '<tr><td>Дата производства</td><td><input type="text" value="' + data.month + ' ' + data.year + '"></td></tr>';
html += '</table>';
html += '<div class="clear20"></div>';
html += '<div id="closePopupTextarea">OK</div>';
html += '<div class="clear40"></div></div>';
$.fancybox.open(html, {
protect: false,
modal: true
});
}
}
});
//}