(Опубликовано изначально на Hacker News) — Пн 23 декабря 2019 г. | Автор: @betoayesa

Внедрение iFrame на любую производственную страницу дает вам полные возможности для автоматизации навигации через нее, избегая, например, проблем с блокировкой междоменных запросов. Инструменты разработчика браузера предоставляют вам большую часть всего необходимого для завершения небольшого проекта по парсингу и извлечению данных.

Также библиотека, такая как jQuery, позволит вам манипулировать и получать доступ к DOM, а iFrame поддерживает, например, пагинацию.

🔬Несколько примеров использования инструментов разработчика браузера

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

Общие строки кода

Работайте с jQuery или с чем угодно. Главное - получить доступ к DOM для его манипуляции.

Внедрение jQuery:

var urls = result = [];
$ = $ || jQuery;

if (typeof $ == "undefined"){
	var s = document.createElement("script");
	s.type = "text/javascript";
	s.src = "https://code.jquery.com/jquery-3.4.1.slim.min.js";
	document.body.appendChild((s);
}var $iframe = $('<iframe id="iframe"  name="iframe" src="">').appendTo('body');

Сохранение и вывод результатов:

var result = []; // Я буду использовать переменную result для сохранения всех полученных данных
JSON.stringify(result); // выведет JSON-строку в консоль разработчика

Аудит SEO (без использования iframe)

Простой код для получения всех URL-адресов текущей страницы, затем получения их заголовков, текста h1 и h2, а также загрузки всех изображений. Например, быстрый SEO-аудит любого сайта: Слава богу, это будет парсинг на нулевом уровне, и вы будете посещать много URL-адресов = '#', поэтому это закончится скоро.

var urls = result = [];
$('body a').each(function(){ urls.push($(this).attr("href")); });
urls.forEach(function(url){
	$.get(url,function(body){
		var scraped ={
			title: $(body).find('title').text(),
			h1: $(body).find('h1').text(),
			h2: $(body).find('h2')[0].text()			
		};
		result.push(scraped); 
	});
});

🚀 Парсинг всех объявлений о жилье на Craiglist в Нью-Йорке (с использованием iframe)

С помощью iframe мы можем использовать пагинацию, чтобы сохранить состояние родительского элемента при переходе по страницам сайта. Целевой URL: https://newyork.craigslist.org/d/apts-housing-for-rent/search/apa

var data = [];
var $iframe = $('<iframe id="iframe"  name="iframe" src="">').appendTo('body');

$iframe.on('load',function(){
	$iframe.contents().find('.result-row').each(function(){
    	data.push({
		title: $(this).find('.result-title').text(),
		img: $(this).find('img').attr("src"),
		price: $(this).find('.result-price:first').text()
	    });
	});
	
	setTimeout(function(){
		$iframe.prop("src",$iframe.contents().find('body').find('.next.button').attr("href"));
	},500);
});// И все начинает работать, когда вы устанавливаете URL первого iframe
$iframe.prop("src", "https://newyork.craigslist.org/d/apts-housing-for-rent/search/apa");// Массив данных будет собирать извлеченные данные.
console.log(JSON.stringify(data)); // Вернет вам JSON-строку, которую можно экспортировать

Обратите внимание, что этот код не остановится, он будет переходить по всем страницам с объявлениями.

Парсинг ваших собственных твитов на Twitter

С Twitter вам не нужен iframe, вам просто нужно прокрутить вниз, чтобы получить больше твитов. Кроме того, здесь просто невозможно внедрить jQuery, вам нужен компонент туннелирования HTTP для изменения заголовков ответа.

var data = [];
function extract(){
    var els = document.querySelectorAll('article');
    els.forEach(function(el){
        data.push(el.innerText); // Я сохраняю весь HTML внутри него
    });
    
    window.scrollTo(0,document.body.scrollHeight);
};

setInterval(extract,2000);

🌟 Хотите больше примеров? Спросите меня, пожалуйста, @betoayesa или betolopezayesa@gmail.com

⚠️ Будьте внимательны

• Большие сайты серьезно относятся к безопасности, поэтому попытка парсить Twitter или Google отличается от парсинга сайта на WordPress. Внедрение jQuery в Twitter, например, не так просто.
• Парсинг данных один раз отличается от настройки процесса регулярного извлечения.
• Все сценарии парсинга различны.
• И поскольку они являются веб-сайтами, "сценарии" обновляются со временем.
• Никогда не стоит зависеть от внешних источников, таких как API или парсинг данных, для бизнеса.
• В любом проекте парсинга есть 3 основных части: (a) Исследование целевого URL, (b) Создание скриптов для обхода и парсинга и успешное их выполнение в первый раз, © Планирование поддержки полученных данных.

👎 Ограничения

• Он не сможет справиться с такими крайними случаями, которые вам нужно управлять (неправильно сформированные URL-адреса, ошибки времени выполнения и т. д.).
• Вам понадобится браузер и его постоянное открытие.
• iframe работает медленно.
• Вы не можете обойти их защиту без использования компонента HTTP-туннелирования.
• Вы не можете переключать прокси.
• Вы не можете управлять заголовками HTTP.

👌 Преимущества

Он дает мне полную гибкость, которая, как мне кажется, отсутствует в других решениях. Вы можете выполнять действия пользовательского интерфейса до или после парсинга контента, имея доступ к точно такой же версии посетителя, объекту окна, консоли, всему HTML...

• Все запросы будут законными в любой системе аутентификации или протоколе. Нет проблем с сайтами, требующими вход в систему.
• Вы можете контролировать все в полностью отображаемой версии целевой страницы, действия пользовательского интерфейса, клики... все внутри и, что самое важное, что делать дальше. Вы также можете автоматически заполнять формы.
• Вы можете быстро тестировать парсинговые скрипты.
• Я тестирую ту же концепцию внутри приложения Electron с использованием компонента веб-просмотра, и скорость улучшается впечатляющим образом.

Преимущество наличия HTTP-туннелирования, которое в то же время использует вращающиеся прокси: вы непобедимы. Поскольку вы можете манипулировать заголовками и отображать контент внутри iframe (но в том же домене!), у вас есть контент, готовый для парсинга и автоматизации.

Автор

Привет! Я @betoayesa!

Как разработчик, я участвовал в нескольких проектах парсинга и анализа данных. Самые крупные из них были e-comprice (сервис мониторинга цен) и sporteeze (сервис для отслеживания магазинов приложений и Android Play Store), но я также делал много мелких и средних парсинговых проектов. Я использовал различные языки программирования для парсинга контента, но в основном это были Python, PHP и JavaScript с использованием CasperJs.

Спасибо, что дочитали до конца! Кто-нибудь должен создать значки или что-то подобное, чтобы люди, которые читают до конца, получали признание : )