Zdobądź h tagi i img src z zewnętrznego adresu URL, używając jquery i .net

Question

Mam aplikację internetową, którą chcę uzyskać znacznik h1 i pierwszy obraz oraz pierwsze kilka wierszy tekstu z zewnętrznej strony internetowej. Nigdy wcześniej tego nie robiłem i uważam, że najlepiej jest używać jquery, ale nie jestem pewien. Czy możesz wskazać mi właściwy kierunek lub podać przykład kodu w .net i jquery? Dzięki.

Myślę, że trochę jak Facebook wyciąga obraz i kilka linii, gdy wpisujesz adres URL w polu wiadomości jako nowy wpis.

Answer 1

można spróbować z mieszanką jquery i php, czy co tam masz:

//requestExternalURL.php 

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

i Ajax/jQuery:

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

zwykłą rozmowę .net pliku: // requestExternalURL.aspx

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

i ponownie z ajax/jquery:

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

nadzieję, że to pomaga.

Answer 2

Nie można pobrać żadnych znaczników adresów URL za pomocą AJAX z powodu CORS (cross-origin resource sharing), a większość witryn internetowych nie zezwala każdemu na korzystanie z ich treści. W twoim przypadku powinieneś użyć metody proxy na swoim serwerze.

Utwórz działanie, które odbiera adres URL i pobiera jego znaczniki na serwerze, a następnie użyj AJAX, aby zażądać kodu HTML strony przy użyciu nowej akcji.

Stamtąd masz dwie opcje. Parsowanie kodu HTML na serwerze, wyodrębnianie wszystkich potrzebnych danych, a następnie wysyłanie ich z powrotem do klienta powoduje, że cały kod HTML jest przesyłany do klienta. Gorąco polecam używanie serwera do parsowania, użyję mniejszej przepustowości, a twój serwer prawdopodobnie osiągnie lepszą wydajność i szybkość niż zapewnia większość przeglądarek.

Jeśli zdecydujesz się na analizę znaczników po stronie klienta, najprostszym sposobem na to będzie przekazanie kodu HTML do elementu głównego, a następnie wysłanie zapytania do danych przy użyciu zwykłych metod.

tj

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

Minusem jest to, że kiedy już wolno przeglądarka do analizowania znaczników będą automatycznie ładować żadnych zasobów, które były obecne, takie jak obrazy.

Nie używam .Net, więc nie jestem w stanie dostarczyć Ci dokładnych narzędzi, których możesz potrzebować, ale sugeruję, abyś sam sprawdził, jak wykonać te dwa zadania na serwerze.

1. Odczytaj zawartość adresu URL w ciągu znaków.
2. Użyj dowolnego parsera DOM, podaj ciąg HTML i zapytanie o dane.

Answer 3

Wariant 1: Jeśli strona zewnętrzna jest na tym samym serwerze co strona wywołującego potem po prostu upewnić się, że masz włączone nowoczesną wersję jQuery, a następnie skonfigurować następujące 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 
    }); 
}); 

Opcja 2: Jeśli jednak strona zewnętrzna znajduje się na innym serwerze, może być konieczne utworzenie proxy .NET w celu pobrania strony. Następnie wykonasz podobne połączenie jak powyżej, ale musisz zastąpić powyższe

external.html z .

Wariant 3: Jeśli drugi serwer, który ma zawartość, którą chcesz pobrać podpór CORS nie musiałby proxy po stronie serwera, ale byłoby po prostu dostarczyć pełną ścieżkę strony zewnętrznej.

http://www.example.com/somepage.html zamiast external.html (opt. 1 code)

Answer 4

Facebook zachęca do wykorzystania Open Graph Protocol danych ciągnąć tego rodzaju metadanych. Mają infrastrukturę, która zajmuje się skrobaniem stron i analizowaniem dostępnych metadanych.

wskazać używasz .NET, jeśli o to chodzi to może można wykorzystać bibliotek analizowania otwartych danych wykresu dla celów: Zobacz OpenGraph-Net i OpenGraph .NET