Простая очистка экрана с помощью jQuery
Я играл с идеей использования простого скребка экрана, используя jQuery, и мне интересно, возможно ли следующее.
У меня есть простая HTML-страница, и я пытаюсь (если это возможно) получить содержимое всех элементов списка с другой страницы, например:
Главная страница:
<!-- jQuery -->
<script type='text/javascript'>
$(document).ready(function(){
$.getJSON("[URL to other page]",
function(data){
//Iterate through the <li> inside of the URL's data
$.each(data.items, function(item){
$("<li/>").value().appendTo("#data");
});
});
});
</script>
<!-- HTML -->
<html>
<body>
<div id='data'></div>
</body>
</html>
Другая страница:
//Html
<body>
<p><b>Items to Scrape</b></p>
<ul>
<li>I want to scrape what is here</li>
<li>and what is here</li>
<li>and here as well</li>
<li>and append it in the main page</li>
</ul>
</body>
Итак, возможно ли использовать jQuery для извлечения всего содержимого элемента списка с внешней страницы и добавления их в div?
7 ответов
Использование $.ajax загрузить другую страницу в переменную, затем создать временный элемент и использовать .html() установить содержимое на возвращаемое значение. Переберите дочерние элементы элемента nodeType 1 и сохраните их первые дочерние значения nodeValues. Если внешняя страница отсутствует на вашем веб-сервере, вам потребуется прокси-файл с вашим собственным веб-сервером.
Что-то вроде этого:
$.ajax({
url: "/thePageToScrape.html",
dataType: 'text',
success: function(data) {
var elements = $("<div>").html(data)[0].getElementsByTagName("ul")[0].getElementsByTagName("li");
for(var i = 0; i < elements.length; i++) {
var theText = elements[i].firstChild.nodeValue;
// Do something here
}
}
});
Простой соскоб с jQuery...
// Get HTML from page
$.get( 'http://example.com/', function( html ) {
// Loop through elements you want to scrape content from
$(html).find("ul").find("li").each( function(){
var text = $(this).text();
// Do something with content
} )
} );
$.get("/path/to/other/page",function(data){
$('#data').append($('li',data));
}
Если это для того же домена, то нет проблем - решение jQuery хорошо.
Но в противном случае вы не сможете получить доступ к контенту с произвольного веб-сайта, поскольку это считается угрозой безопасности. Смотрите ту же политику происхождения.
Конечно, существуют обходные пути на стороне сервера, такие как веб-прокси или заголовки CORS. Если вам повезет, они поддержат jsonp.
Но если вы хотите, чтобы клиентское решение работало с произвольным веб-сайтом и веб-браузером, вам не повезло. Есть предложение ослабить эту политику, но это не повлияет на нынешние веб-браузеры.
Вы можете рассмотреть pjscrape:
http://nrabinowitz.github.io/pjscrape/
Это позволяет вам делать это из командной строки, используя javascript и jQuery. Он делает это с помощью PhantomJS, который является браузером безголового веб-набора (у него нет окна, и он существует только для использования вашего скрипта, поэтому вы можете загружать сложные веб-сайты, использующие AJAX, и он будет работать так же, как если бы это был настоящий браузер),
Примеры говорят сами за себя, и я считаю, что это работает на всех платформах (включая Windows).
Используйте каналы YQL или Yahoo, чтобы сделать междоменный запрос для html-содержимого необработанной страницы. Канал yahoo или YQL-запрос будут отображаться в виде JSON, который может быть обработан jquery для извлечения и отображения необходимых данных.
С другой стороны: YQL и Yahoo pipe ПОДЧИНЯЮТСЯ файл robots.txt для целевого домена, и если страница слишком длинная, команды регулярного выражения Yahoo Pipes не будут выполняться.
Я уверен, что вы столкнетесь с проблемой CORS во многих случаях. Отсюда попробуйте решить проблему с CORS.
var name = "kk";
var url = "http://anyorigin.com/go?url=" + encodeURIComponent("https://www.yoursite.xyz/") + name + "&callback=?";
$.get(url, function(response) {
console.log(response);
});