document.querySelector () возвращает ноль, когда элементы DOM уже видны - PullRequest
Новая
       29

document.querySelector () возвращает ноль, когда элементы DOM уже видны

0 голосов
/ 06 января 2019

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

Однако я сталкиваюсь со странной ошибкой (см. Прилагаемый Imgur для фотографий этого поведения)

https://imgur.com/a/rSwCAxj

Проблема: querySelector возвращает ноль для элемента DOM, который четко виден:

Снимок экрана: https://imgur.com/d540E6p

(1) Поле ввода имени пользователя хорошо видно на сайте (https://internet.ocbc.com/internet-banking/), (2) Однако, когда я запускаю document.querySelector('#access-code'), консоль возвращает ноль.

Мне интересно, почему это поведение так, и каковы обстоятельства, когда браузер будет возвращать ноль на querySelector(#id) query, когда узел DOM отчетливо виден.

# РЕДАКТИРОВАТЬ: странный обходной путь, который работает :

Я продолжал играть с браузером и использовал DevTools для проверки элемента DOM и использования его для копирования пути JS.

Как ни странно, после использования Chrome Devtools для копирования пути JS, document.querySelector('#access-code') вернул правильный элемент.

Снимок экрана с возвращением правильного элемента : https://imgur.com/a/rSwCAxj

В обоих случаях одна и та же строка поиска используется для document.querySelector.

1 Ответ

0 голосов
/ 06 января 2019

Я считаю, что вы не можете получить правильное значение, используя document.querySelector('#access-code'), потому что сайт использует frameset.

На сайте есть фрейм с src для загрузки контента 

<frame src="/internet-banking/Login/Login">

DOMContentLoading выполняется, когда загружается основной документ, и не ожидает загрузки содержимого фрейма.

Прежде всего, вам нужен слушатель для события загрузки. 

window.addEventListener("load",function() {
   ...
 });

И позже вы не можете просто использовать document.querySelector('#access-code') потому что ввод, который вы хотите получить, находится внутри фрейма. Вам нужно будет найти способ доступа к содержимому фрейма, а затем использовать простой querySelector.

Так что-то вроде: 

window.addEventListener("load",function() {
   console.log(window.frames[0].document.querySelector('#access-code'));
 });

Кстати, смотрите в: view-source: https://internet.ocbc.com/internet-banking/ выглядит так, как будто сайт в основном отображается на стороне клиента.

...