Как извлечь один и тот же элемент из нескольких URL и сохранить в файл? - PullRequest
Новая
       8

Как извлечь один и тот же элемент из нескольких URL и сохранить в файл?

0 голосов
/ 27 марта 2020

У меня есть список из многих URL, для которых я хочу извлечь указанный c элемент, имеющий одинаковый селектор запросов в каждом URL.

Например, открыв в Chrome URL " http://www.nationalregisterofhistoricplaces.com/al/autauga/state.html "и затем, выполнив эту команду 

document.querySelector("body > div:nth-child(7) > div.listheader")

, я получаю печать необходимого содержимого в Chrome консоли браузера (Если мне нужно попробовать javascript сценарии в другом инструменте Пожалуйста, дайте мне знать, какой из них)

Я новичок в javascript, и я пытаюсь, и я хотел бы извлечь элемент div из URL_1 и сохранить его в. html, затем извлечь div из URL_2 до URL_N и добавление ниже предыдущего div и т. Д.

Пока я пробовал следующий код, но он открывает только первый URL в новой вкладке и не печатает его div. 

var urls = [
"http://www.nationalregisterofhistoricplaces.com/al/autauga/state.html",
"http://www.nationalregisterofhistoricplaces.com/al/barbour/state.html",
"http://www.nationalregisterofhistoricplaces.com/ca/fresno/state.html"
];

for (i = 0; i < urls.length; i++) {
    window.open(urls[i])
    document.querySelector("body > div:nth-child(7) > div.listheader")
};

Моя цель - объединить div каждого URL и сохранить их в. html, что бы выглядело примерно так: 

<!-- div from URL_1 -->

<div class="listheader">
<img src="/nr-images/flag.gif" width="33" height="28">
<div class="listname">Bell House                                                                                                              
<span class="added">(added 1999 -  - #99000150)</span>
</div>
<div class="listaka">Also known as Biggs House</div>
<div class="listaddress">550 Upper Kingston Rd.                                                                                                  , Prattville
</div>
</div>

<!-- div from URL_2 -->

<div class="listheader">
<img src="/nr-images/flag.gif" width="33" height="28">
<div class="listname">Bray-Barron House                                                                                                       
<span class="added">(added 1971 -  - #71000093)</span>
</div>
<div class="listaddress">N. Eufaula Ave.                                                                                                         , Eufaula
</div>
</div>

<!-- div from URL_3 -->

<div class="listheader">
<img src="/nr-images/flag.gif" width="33" height="28">
<div class="listname">Bank of Italy                                                                                                           
<span class="added">(added 1982 -  - #82000963)</span>
</div>
<div class="listaka">Also known as Bank of America on Fulton Mall</div>
<div class="listaddress">1015 Fulton Mall                                                                                                        , Fresno
</div>
</div>

Как я могу это сделать? Заранее спасибо.

ОБНОВЛЕНИЕ

Ниже приведено описание решения, предоставленного @Thomas. Я вижу 3 фрейма, но при расширении они пустые.

enter image description here

Ответы [ 2 ]

2 голосов
/ 27 марта 2020

Я просто подумал о другом пути. Поскольку все URL-адреса находятся в одном домене, вы можете открыть их все в iframe, и у вас есть доступ к содержимому каждого iframe из вашего скрипта. Вот как это будет выглядеть: 

for (const url of urls) {
    const iframe = document.createElement('iframe')
    iframe.src = url
    iframe.onload = () => {
        console.log(iframe.contentDocument.querySelector("body > div:nth-child(7) > div.listheader"))
    }
    document.body.appendChild(iframe)
}

Обратите внимание, что обратный вызов onload является асинхронным, поэтому вы получите вывод в произвольном порядке. Кроме того, нет обработки ошибок (для этого прикрепите обратный вызов к onerror).

Если у вас есть большое количество URL для сканирования, вы можете не захотеть делать их все одновременно, как это, потому что каждый iframe похож на отдельную вкладку браузера и требует значительных ресурсов. Таким образом, вы можете сделать это в пакетном режиме или запустить следующий только после завершения предыдущего.

0 голосов
/ 27 марта 2020

В консоли браузера у вас будет плохое время, потому что все JavaScript, которые вы там пишете, будут работать в контексте текущей страницы. Как только вы открываете новую страницу, вы теряете это.

Вы можете сделать это с NodeJS, который является автономным JavaScript движком, работающим вне браузера. Вам нужно будет написать код для извлечения HTML и библиотеку для анализа и запроса.

Другой подход может быть NW. js, который похож на браузер, но без песочницы.

...