Я разрабатываю сканер для службы, построенной как одностраничное приложение (SPA).
Я не уверен, используется ли платформа React, Angular или что-то еще. Мой сканер взаимодействует с таблицей, которая отображается после нажатия кнопки с идентификатором queries-process-button
. У таблицы есть класс i3WFpf
.
Когда я впервые просматриваю таблицу, все работает отлично, и данные извлекаются правильно. Однако когда я перехожу в другое меню и пытаюсь просканировать данные новой таблицы, мой сканер по-прежнему возвращает данные из исходной таблицы, хотя содержимое таблицы визуально обновилось на странице.
Интересно, что когда я перезагружаю всю страницу и затем просматриваю новую таблицу, извлекаются правильные данные. Но опять же, проблема сохраняется, когда я пытаюсь просканировать любую последующую таблицу.
Вот фрагмент кода, который я использую в консоли браузера:
const table = document.querySelector('table.i3WFpf');
if (table) {
const rows = table.rows;
for (let i = 0; i < rows.length; i++) {
let cells = rows[i].cells;
let rowData = [];
for (let j = 0; j < cells.length; j++) {
rowData.push(cells[j].innerText);
}
console.info(`Row ${i + 1}:`, rowData);
}
} else {
console.info("Table with class 'i3WFpf' not found.");
}
Как мне теперь изменить свой сканер, чтобы он правильно получал обновленные данные таблицы без необходимости перезагрузки страницы?
Есть ли способ гарантировать, что сканер всегда извлекает самые последние данные, отображаемые в таблице, особенно в контексте SPA?
@C3roe Это возможно, но я в этом сомневаюсь. Этот сервис связан с одним из сервисов Google под названием Search Console.
Вы выполняете очистку на стороне клиента, поэтому можно захватить только то, что в данный момент находится в DOM. Если вы все еще получаете «старые данные», когда «новые данные» уже отображаются, это может означать только то, что «старые данные» все еще находятся в DOM.
@C3roe Верно, я тоже думаю, что DOM не обновился. Зная это, как вы думаете, что можно сделать, чтобы решить эту проблему?
Использовали ли вы инструменты разработки браузера для проверки отображаемых элементов?
@C3roe да, я использовал инструменты разработки для проверки новых данных и выполнения приведенного выше кода.
А элемент, содержащий новый контент, действительно соответствует селектору table.i3WFpf
? Но тогда querySelector
все равно предоставит вам только первый элемент, соответствующий селектору, если старый все еще существует в DOM. Возможно, вам придется использовать querySelectorAll
, а затем выбрать последнюю таблицу или что-то в этом роде.
@C3roe Молодец, друг мой! Добавьте свой ответ, пожалуйста, за этот выбор
const table = document.querySelector('table.i3WFpf');
querySelector
вернет только первый элемент, соответствующий селектору.
Если сайт, который вы хотите очистить, загружает дополнительные данные в таблицу, соответствующую тому же селектору, и только скрывает исходную таблицу, но сохраняет ее в DOM — тогда вам нужно переключиться на использование querySelectorAll
, а затем выбрать последнюю (предположительно? ) соответствующий элемент, который он находит.
Основываясь на доступной на данный момент информации, я могу только догадываться, но похоже, что сайт, который вы очищаете, может просто создать новую вторую таблицу и скрыть первую. Но
document.querySelector('table.i3WFpf')
, конечно, предоставит вам только первый соответствующий элемент, найденный в документе.