Holen Sie sich h-Tags und img src von externen URL mit jquery und. NET

Question

Ich habe eine Web-Anwendung, die ich möchte, um die h1-Tag und das erste Bild und die ersten Zeilen Text von einer externen Webseite. Ich habe das noch nie gemacht und denke, dass es am besten mit jQuery gemacht wird, aber ich bin mir nicht sicher. Können Sie mir bitte in die richtige Richtung zeigen oder ein Kodierungsbeispiel in .net und jquery geben? Vielen Dank.

Ich denke irgendwie wie Facebook zieht das Bild und ein paar Zeilen, wenn Sie eine URL in den Briefkasten als neuer Beitrag eingeben.

Answer 1

Sie könnten versuchen, mit einer Mischung aus jquery und php, oder was auch immer Sie haben:

//requestExternalURL.php 

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

und mit Ajax/jquery:

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

Einem einfachen .net Aufruf Dateinamen: // requestExternalURL.aspx

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

und wieder mit ajax/jquery:

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

hoffe es hilft.

Answer 2

Sie können keine URLs Markup mit AJAX aufgrund CORS (cross-origin resource sharing) abrufen und die meisten Websites im Internet wird nicht zulassen, nur jemand ihren Inhalt zu verwenden. Was Sie in Ihrem Fall tun sollten, ist eine Proxy-Methode auf Ihrem Server.

Erstellen Sie eine Aktion, die eine URL empfängt und ihr Markup auf Ihrem Server abruft. Verwenden Sie anschließend AJAX, um die HTML-Seiten mit Ihrer neuen Aktion anzufordern.

Von dort haben Sie zwei Möglichkeiten. Analysieren Sie den HTML-Code auf dem Server, extrahieren Sie alle benötigten Daten und senden Sie sie an den Client zurück OR senden Sie den gesamten HTML-Code zurück an den Client. Ich empfehle dringend, den Server zu verwenden, um das Parsing durchzuführen, es wird weniger Bandbreite benötigen und Ihr Server hat wahrscheinlich eine bessere Leistung und Geschwindigkeit als die meisten Browser bieten.

Wenn Sie sich entschieden haben, das Markup auf dem Client-Ende zu analysieren, besteht der einfachste Weg darin, den HTML-Code in ein Root-Element zu überführen und dann die Daten mit regulären Methoden abzufragen.

heißt

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

Der Nachteil dabei ist, dass, sobald Sie den Browser, es zu analysieren Ihr Markup erlaubt haben, werden automatisch alle Ressourcen geladen werden, die vorhanden waren, wie Bilder.

Ich benutze .Net nicht, so kann ich Ihnen nicht die genauen Tools zur Verfügung stellen, die Sie benötigen, aber ich schlage vor, dass Sie selbst nach Möglichkeiten suchen, diese beiden Aufgaben auf dem Server zu erledigen.

1. Liest einen bestimmten URL-Inhalt in eine Zeichenfolge ein.
2. Verwenden Sie einen beliebigen DOM-Parser, übergeben Sie ihm die HTML-Zeichenfolge und fragen Sie nach den Daten.

Answer 3

Option 1: Wenn die externe Seite ist auf dem gleichen Server wie die anrufenden Seite dann nur sicherstellen, dass Sie eine moderne Version von jQuery aufgenommen haben und dann die folgenden JS ein:

//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 
    }); 
}); 

Option 2: Wenn sich die externe Seite jedoch auf einem anderen Server befindet, möchten Sie möglicherweise einen .NET-Proxy erstellen, um die Seite für Sie abzurufen. Dann würden Sie einen ähnlichen Anruf wie oben, aber Sie müssten

external.html oben mit myproxy.aspx?url=http://www.example.com/somepage.html ersetzen.

Option 3: Wenn der andere Server, der die Inhalte, die Sie unterstützt holen wollen muss CORS Sie nicht einen serverseitigen Proxy benötigen würde, aber Sie würden nur den vollständigen Pfad der externen Seite liefern.

http://www.example.com/somepage.html anstelle von external.html (opt. 1 Code)

Answer 4

Facebook fördert die Nutzung von Open Graph Protocol Daten, die diese Art von Metadaten zu ziehen. Sie verfügen über eine Infrastruktur, mit der Seiten gescannt und verfügbare Metadaten analysiert werden können.

Sie zeigen Sie .NET verwenden, wenn das der Fall ist, dann können Sie vielleicht Bibliotheken nutzen, die Open Graph-Daten für Ihren Zweck analysieren: OpenGraph-Net und OpenGraph .NET