2011-04-14 18 views
40

jQuery'yi kullanarak basit bir ekran kazıyıcı kullanmayı düşünerek oynuyordum ve aşağıdakilerin mümkün olup olmadığını merak ediyorum.jQuery Kullanarak Basit Ekran Kazıması

Ben basit bir HTML sayfası var ve (eğer mümkünse), başka bir sayfadan liste öğelerinin tüm içeriğini kapmak şöyle bir girişim yapıyorum:

Ana Sayfa:

<!-- 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> 

Diğer Sayfa: Yani

//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> 

, öyle jQuery kullanarak liste öğesi içeriğinin tümünü harici bir sayfadan çekmek ve bir divun içine eklemek mümkün mü?

+0

O JavaScript geçerli sayfanın (etiketleri olmadan) metni almak da mümkündür: http://stackoverflow.com/questions/5321739/how-can-i-get-the-text-only- no-tag-from-a-html-document –

cevap

33

Diğer sayfayı bir değişkene yüklemek için $.ajax kullanın, sonra geçici bir öğe oluşturun ve içeriği döndürülen değere ayarlamak için .html() kullanın. Öğenin nodeType 1 çocuklarına atlayın ve ilk çocuk düğümlerini saklayın. Dış sayfa web sunucunuzda değilse, dosyayı kendi web sunucunuzla proxy etmeniz gerekir. Böyle

şey: bu ise

$.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 
      } 
    } 
}); 
+0

"Dosyanın proxy'si" ne anlama gelir? –

+1

@AdamYoungers: “Proxy dosya” oldukça fazla bir tanımdır. Kendi sunucunuza bir istek yapın; kendi sunucunuzu istenen sayfayı hedeften getirin. Nginx'te bir "proxy_pass" olurdu. PHP'de yapmak istediyseniz, ' '. – Ryan

+0

Ancak, prox edilen kaynakların İçerik Türü'nü beyaz listeye eklediğinizden emin olun; XHR'yi gösteren özel bir başlık eklemek ve kontrol etmek; açık bir vekilden kaçınmak; Mümkün olduğunda CORS'ten faydalanın ve proxy'yi farklı bir alana koyun. – Ryan

6
$.get("/path/to/other/page",function(data){ 
    $('#data').append($('li',data)); 
} 
5

aynı etki için o zaman hiçbir sorun - jQuery çözüm iyidir.

Ancak, başka bir deyişle, bir güvenlik riski olarak kabul edildiğinden, rastgele bir web sitesindeki içeriğe erişemezsiniz. Bakınız same origin policy. Web proxy veya CORS headers gibi bir sunucu tarafı geçici çözümleri de vardır. Şansınız varsa, jsonp'u destekleyecektir.

Ancak bir istemci tarafı çözümü rasgele bir web sitesi ve web tarayıcısı ile çalışmak istiyorsanız, o zaman şansınız yok. proposal to relax this policy var, ancak bu geçerli web tarayıcıları etkilemez.

+5

Etki alanınızın dışındaki içeriğe erişmenin birçok yolu vardır. Örneğin: • jsonp • proxy – lightyrs

+0

Aynı Köken İlkesi Safari'de bir sorun değil ve düzgün bir şekilde başlatılan Chrome –

+0

@LukeMcneice, aynı başlangıç ​​politikasının nasıl safari ve kromda olduğunu açıklayamaz mı? ayrıca düzgün bir şekilde başlatılan ne anlama geliyor? – user566245

1

Ham sayfa html içeriğinin etki alanı isteğini yapmak için YQL veya Yahoo borularını kullanın. Yahoo borusu veya YQL sorgusu bunu gerekli verileri ayıklamak ve görüntülemek için jquery tarafından işlenebilen bir JSON olarak geri gönderecektir. Bunlara karşın

: YQL ve Yahoo boruları hedef etki alanı için robots.txt dosyasını İTAAT ve sayfa uzunluğunda Yahoo Pipes ise regex komutlar çalışmaz.

5

Sen pjscrape düşünebilir: Bu javascript ve jQuery kullanarak, komut satırından bunu sağlar

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

. Bunu başsız bir webkit tarayıcısı olan PhantomJS kullanarak yapar (penceresi yoktur ve sadece betiğinizin kullanımı için vardır, böylece AJAX kullanan karmaşık web sitelerini yükleyebilir ve tıpkı gerçek bir tarayıcı gibi çalışır). .

Örnekler kendiliğinden açıklayıcıdır ve bunun tüm platformlarda (Windows dahil) çalıştığına inanıyorum.jQuery ile

4

Basit kazıma ...

// 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 

    }) 

}); 
0

Sana birçok durumda istekleri ile CORS sorunu vuracaktır eminim. here adresinden CORS sorununu gidermeye çalışın.

var name = "kk"; 
var url = "http://anyorigin.com/go?url=" + encodeURIComponent("https://www.yoursite.xyz/") + name + "&callback=?"; 
$.get(url, function(response) { 
    console.log(response); 
});