Простая очистка экрана с помощью jQuery - PullRequest
Новая
       0

Простая очистка экрана с помощью jQuery

41 голосов
/ 14 апреля 2011

Я играл с идеей использования простого скребка экрана, используя 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 ]

35 голосов
/ 14 апреля 2011

Используйте $.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
          }
     }
});
6 голосов
/ 15 апреля 2011 
$.get("/path/to/other/page",function(data){
  $('#data').append($('li',data));
}
5 голосов
/ 27 сентября 2013

Вы можете рассмотреть pjscrape:

http://nrabinowitz.github.io/pjscrape/

Это позволяет вам делать это из командной строки, используя javascript и jQuery.Он делает это с помощью PhantomJS, который является браузером безголового веб-набора (у него нет окна, и он существует только для использования вашего скрипта, поэтому вы можете загружать сложные веб-сайты, использующие AJAX, и он будет работать так же, как если бы это был настоящий браузер).

Примеры говорят сами за себя, и я считаю, что это работает на всех платформах (включая Windows).

5 голосов
/ 15 апреля 2011

Если это для того же домена, то нет проблем - решение jQuery хорошо.

Но в противном случае вы не сможете получить доступ к контенту с произвольного веб-сайта, поскольку это считается угрозой безопасности. См. та же политика происхождения .

Конечно, существуют обходные пути на стороне сервера, такие как веб-прокси или заголовки CORS . Если вам повезет, они поддержат jsonp.

Но если вы хотите, чтобы клиентское решение работало с произвольным веб-сайтом и веб-браузером, вам не повезло. предлагает ослабить эту политику , но это не повлияет на современные веб-браузеры.

4 голосов
/ 03 июля 2017

Простой соскоб с 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

    } )

} );
1 голос
/ 26 апреля 2011

Используйте каналы YQL или Yahoo, чтобы сделать междоменный запрос для необработанного HTML-содержимого страницы.Канал yahoo или YQL-запрос будет выводить это обратно в виде JSON, который может быть обработан jquery для извлечения и отображения необходимых данных.

С другой стороны: трубы YQL и Yahoo подчиняются файлу robots.txt для целидомен и если страница слишком длинная, команды регулярных выражений Yahoo Pipes не будут выполняться.

0 голосов
/ 09 марта 2018

Я уверен, что во многих случаях вы столкнетесь с проблемой 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);
});
...