Document.querySelector () возвращает null, когда элементы DOM уже видны
Я пытаюсь создать автоматический скрипт Puppeteer для загрузки моих ежемесячных банковских операций с веб-сайта моего банка.
Однако я сталкиваюсь со странной ошибкой (см. Прикрепленный Imgur, чтобы увидеть изображения этого поведения)
Проблема: querySelector возвращает null для четко видимого элемента DOM:
Скриншот: https://imgur.com/d540E6p
(1) Поле для ввода имени пользователя четко видно на сайте (https://internet.ocbc.com/internet-banking/),
(2) Однако, когда я запускаю document.querySelector('#access-code'), консоль возвращает ноль.
Мне интересно, почему это так, и при каких обстоятельствах браузер возвращает null на querySelector(#id) query, когда узел DOM четко виден.
# Обновлено: странное решение, которое работает:
Я продолжал экспериментировать с браузером и использовал DevTools для проверки элемента DOM и его использования для копирования пути JS.
Как ни странно, после использования Chrome Devtools для копирования пути JS document.querySelector('#access-code') вернул правильный элемент.
Снимок экрана, на котором он возвращает правильный элемент: https://imgur.com/a/rSwCAxj
В обоих случаях для document.querySelector используется одна и та же строка поиска.
Попробую перефразировать - спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я считаю, что вы не можете получить надлежащую отдачу от использования document.querySelector('#access-code'), потому что веб-сайт использует набор фреймов.
На сайте есть фрейм с src для загрузки контента
<frame src = "/internet-banking/Login/Login">
DOMContentLoading выполняется при загрузке основного документа и не дожидается загрузки содержимого фрейма.
Прежде всего, вам нужен слушатель для события загрузки.
window.addEventListener("load",function() {
...
});
И в дальнейшем вы не можете просто использовать document.querySelector('#access-code')
потому что ввод, который вы хотите получить, находится внутри фрейма. Вам нужно будет найти способ получить доступ к содержимому фрейма, а внутри него использовать простой querySelector.
Так что-то вроде:
window.addEventListener("load",function() {
console.info(window.frames[0].document.querySelector('#access-code'));
});
Кстати, смотрите в: view-source: https://internet.ocbc.com/internet-banking/ похоже, что веб-сайт в основном отображается на стороне клиента.
У меня была ошибка в моем коде, чтобы получить содержимое кадра, необходимо использовать window.frames[0].document. Поэтому, если вы вводите код, который ожидает события загрузки, а затем получаете документ из кадра, все должно работать нормально, я проверил его инъекцию на веб-страницу internet.ocbc.com/internet-banking.
Большое спасибо за прекрасное и ясное объяснение !!
Пытался прочитать два раза, но до сих пор не понимаю, о чем вы говорите