Ottieni tag h e img src dall'URL esterno utilizzando jquery e .net

Question

Ho un'applicazione Web che voglio ottenere il tag h1 e la prima immagine e le prime righe di testo da una pagina Web esterna. Non l'ho mai fatto prima e penso che sia fatto meglio usando jquery ma non ne sono sicuro. Puoi per favore indicarmi la giusta direzione o dare un esempio di codifica in .net e jquery? Grazie.

Sto pensando un po 'come Facebook estrae l'immagine e alcune righe quando si digita un url nella casella postale come un nuovo post.

Answer 1

si potrebbe provare con un mix di jQuery e PHP, o che cosa mai avete:

//requestExternalURL.php 

<?php 
    $url = "http://url..."; 
    $homepage = file_get_contents($url); 
    echo $homepage; 
?> 

e con AJAX/jquery:

$(".target").load("requestExternalURL.php", function(){ 
    var h1 = $("h1").first(); 
    var img = $("img").first().attr("src"); 
    //do something 
}); 

Una semplice nome di file chiamata .net: // requestExternalURL.aspx

<%@ Page Language="C#" %> 
<script runat="server"> 
    string homepage = new System.Net.WebClient().DownloadString("http://url..."); 
</script> 
<%=homepage%> 

e di nuovo con l'Ajax/jquery:

$(".target").load("requestExternalURL.aspx", function(){ 
    var h1 = $("h1").first(); 
    var img = $("img").first().attr("src"); 
    //do something 
}); 

spero che sia d'aiuto.

Answer 2

Non è possibile recuperare alcun markup di URL utilizzando AJAX a causa di CORS (cross-origin resource sharing) e la maggior parte dei siti sul Web non consentirà a nessuno di utilizzare il proprio contenuto. Quello che dovresti fare nel tuo caso è usare un metodo proxy sul tuo server.

Creare un'azione che riceve un URL e recupera il suo markup sul server, quindi utilizzare AJAX per richiedere le pagine HTML utilizzando la nuova azione.

Da lì ci sono due opzioni. O analizzare il codice HTML sul server, estrarre tutti i dati necessari, quindi inviarlo al client O inviare tutto il codice HTML al client. Consiglio vivamente di utilizzare il server per eseguire l'analisi, utilizzerà meno larghezza di banda e il server probabilmente offre prestazioni e velocità migliori di quelle fornite dalla maggior parte dei browser.

Se si è deciso di analizzare il markup sul client, il modo più semplice per farlo sarebbe passare il codice HTML in un elemento root, quindi eseguire query per i dati utilizzando metodi regolari.

cioè

var $root = $('<div>').html(response.html); 
console.log($root.find('h1')); // all h1 tags in response's html 

Il rovescio della medaglia è che una volta che hai permesso il browser per analizzare il vostro codice verrà caricato automaticamente tutte le risorse che erano presenti, come ad esempio le immagini.

Non utilizzo .Net quindi non sono in grado di fornirti gli strumenti esatti di cui potresti aver bisogno, ma ti suggerisco di cercare da soli i modi per eseguire queste due attività sul server.

1. Leggere un determinato contenuto URL in una stringa.
2. Utilizzare un parser DOM specifico, passarlo la stringa HTML e interrogare i dati.

Answer 3

Opzione 1: Se la pagina esterna è sullo stesso server come pagina chiamata poi basta assicurarsi di aver inserito una versione moderna di jQuery e quindi impostare la seguente JS:

//let's say that page is external.html 
$(function() { 
    $.get('external.html', function(data) { 
     var html = $($.parseHTML(data)); 
     var h1 = html.find('h1').first(); //first h1 tag 
     var img = html.find('img').first(); //first img tag 
     var text = html.find('body').contents().not('h1').filter(function() { 
      return this.nodeType == 3; 
     }).lt(5); //first few lines of text 
     //h1, img and text may be added to the DOM or processed 
     //however you want 
    }); 
}); 

Opzione 2: Se, tuttavia, la pagina esterna si trova su un altro server, è possibile che si desideri creare un proxy .NET per recuperare la pagina. Quindi si farebbe una chiamata simile come quella sopra ma si dovrebbe sostituire

external.html sopra con myproxy.aspx?url=http://www.example.com/somepage.html.

Opzione 3: Se l'altro server che ha il contenuto che si desidera recuperare supporti CORS non avrebbe bisogno di un proxy server-side, ma si sarebbe solo fornire il percorso completo della pagina esterna.

http://www.example.com/somepage.html al posto di external.html (opz. 1 codice)

Answer 4

di Facebook incoraggia l'utilizzo dei dati Open Graph Protocol per tirare questo tipo di metadati. Hanno un'infrastruttura che fa il lavoro di raschiare le pagine e analizzare i metadati disponibili.

si indica che si sta utilizzando .NET, se questo è il caso, allora forse è possibile sfruttare le librerie che analizzano i dati di Open Graph per il vostro scopo: Vedere OpenGraph-Net e OpenGraph .NET