Grattage D'écran Simple à l'aide de jQuery
j'ai joué avec l'idée d'utiliser un screen-scraper simple en utilisant jQuery et je me demande si ce qui suit est possible.
j'ai une page HTML simple et je fais une tentative (si cela est possible) pour saisir le contenu de tous les éléments de la liste à partir d'une autre page, comme ceci:
Page Principale:
<!-- 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>
Autre Page:
//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>
donc, est-il possible d'utiliser jQuery pour tirer tout l'élément de la liste contenu d'une page externe et les ajouter à l'intérieur d'un div?
7 réponses
Utiliser $.ajax pour charger l'autre page dans une variable, puis créer un élément temporaire et utiliser .html() pour définir le contenu de la valeur retournée. Boucle à travers les enfants de l'élément de nodeType 1 et de garder leurs premiers nodevaluesenfants. Si la page externe n'est pas sur votre serveur web, vous aurez besoin de proxy le fichier avec votre propre serveur web.
quelque Chose comme ceci:
$.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
}
}
});
$.get("/path/to/other/page",function(data){
$('#data').append($('li',data));
}
si c'est pour le même domaine alors pas de problème - la solution jQuery est bonne.
mais autrement vous ne pouvez pas accéder au contenu d'un site web arbitraire parce que c'est considéré comme un risque de sécurité. Voir même origine.
il y a bien sûr des solutions de rechange côté serveur comme un proxy web ou CORS des en-têtes. Si vous avez de la chance, ils soutiendront jsonp.
mais si vous voulez qu'une solution côté client fonctionne avec un arbitraire site web et navigateur web alors vous n'avez pas de chance. Il y a un proposition d'assouplir cette politique, mais cela n'affecte pas les navigateurs web actuels.
Vous pouvez envisager de pjscrape:
http://nrabinowitz.github.io/pjscrape/
il vous permet de le faire à partir de la ligne de commande, en utilisant javascript et jQuery. Il le fait en utilisant PhantomJS, qui est un navigateur WebKit sans tête (il n'a pas de fenêtre, et il n'existe que pour l'usage de votre script, de sorte que vous pouvez charger des sites web complexes qui utilisent AJAX et il fonctionnera tout comme si c'était un vrai navigateur).
les exemples sont explicites et I croyez que cela fonctionne sur toutes les plateformes (y compris Windows).
raclage Simple avec 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
} )
} );
utilisez des pipes YQL ou Yahoo pour faire la demande de domaine croisée pour le contenu HTML de la page brute. Le tuyau yahoo ou la requête YQL recrache cela comme un JSON qui peut être traité par jquery pour extraire et afficher les données requises.
le mauvais côté: les pipes YQL et Yahoo obéissent aux robots.fichier txt pour le domaine cible et si la page est trop longue, les commandes regex de Yahoo Pipes ne fonctionneront pas.
je suis sûr que vous allez frapper la question de CORS avec des demandes dans de nombreux cas. À partir de ici essayer de résoudre le problème 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);
});