Nhận thẻ h và img src từ url bên ngoài bằng jquery và .net

Question

Tôi có một ứng dụng web mà tôi muốn lấy thẻ h1 và hình ảnh đầu tiên và một vài dòng văn bản đầu tiên từ trang web bên ngoài. Tôi chưa bao giờ làm điều này trước đây và nghĩ rằng nó được thực hiện tốt nhất bằng cách sử dụng jquery nhưng tôi không chắc chắn. Bạn có thể xin vui lòng chỉ cho tôi đi đúng hướng hoặc đưa ra một ví dụ mã hóa trong .net và jquery? Cảm ơn.

Tôi đang suy nghĩ giống như Facebook kéo hình ảnh ra và một vài dòng khi bạn nhập url vào hộp thư làm bài đăng mới.

Answer 1

bạn có thể thử với một kết hợp của jquery và php, hoặc những gì đã bao giờ bạn có:

//requestExternalURL.php 

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

và với ajax/jquery:

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

Một đơn giản filename gọi .net: // requestExternalURL.aspx

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

và một lần nữa với ajax/jquery:

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

hy vọng điều đó sẽ hữu ích.

Answer 2

Bạn không thể tìm nạp bất kỳ đánh dấu URL nào bằng AJAX do CORS (cross-origin resource sharing) và hầu hết các trang web trên web sẽ không cho phép bất kỳ ai sử dụng nội dung của chúng. Những gì bạn nên làm trong trường hợp của bạn là sử dụng một phương pháp proxy trên máy chủ của bạn.

Tạo hành động nhận URL và tìm nạp đánh dấu trên máy chủ của bạn, sau đó sử dụng AJAX để yêu cầu HTML trang bằng cách sử dụng tác vụ mới của bạn.

Từ đó bạn có hai tùy chọn. Hoặc là phân tích cú pháp HTML trên máy chủ, trích xuất tất cả dữ liệu bạn cần, sau đó gửi lại cho khách hàng HOẶC gửi tất cả HTML trở lại máy khách. Tôi khuyên bạn nên sử dụng máy chủ để thực hiện phân tích cú pháp, nó sẽ sử dụng ít băng thông hơn và máy chủ của bạn có thể có hiệu suất và tốc độ tốt hơn so với hầu hết các trình duyệt cung cấp.

Nếu bạn quyết định phân tích đánh dấu trên đầu máy khách, cách đơn giản nhất để làm như vậy sẽ chuyển HTML vào phần tử gốc, sau đó truy vấn dữ liệu bằng các phương thức thông thường.

ví dụ:

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

Nhược điểm ở đây là một khi bạn đã cho phép trình duyệt để phân tích đánh dấu của bạn nó sẽ tự động tải bất kỳ tài nguyên mà đã có mặt, chẳng hạn như hình ảnh.

Tôi không sử dụng .Net vì vậy tôi không thể cung cấp cho bạn các công cụ chính xác mà bạn có thể cần, nhưng tôi khuyên bạn nên tự tìm kiếm các cách để thực hiện hai tác vụ này trên máy chủ.

1. Đọc nội dung URL nhất định thành chuỗi.
2. Sử dụng bất kỳ trình phân tích cú pháp DOM đã cho nào, chuyển cho nó chuỗi HTML và truy vấn dữ liệu.

Answer 3

Lựa chọn 1: Nếu trang bên ngoài là trên máy chủ giống như trang gọi điện thoại sau đó chỉ cần đảm bảo rằng bạn đã bao gồm một phiên bản hiện đại của jQuery và sau đó thiết lập các JS sau:

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

Tùy chọn 2: Nếu, tuy nhiên, trang bên ngoài nằm trên máy chủ khác, bạn có thể muốn tạo proxy .NET để tìm nạp trang cho bạn. Sau đó, bạn sẽ thực hiện cuộc gọi tương tự như trên nhưng bạn sẽ phải thay thế

external.html ở trên bằng myproxy.aspx?url=http://www.example.com/somepage.html.

Tùy chọn 3: Nếu máy chủ khác có nội dung bạn muốn tìm nạp hỗ trợ CORS bạn sẽ không cần proxy phía máy chủ nhưng bạn chỉ cung cấp đường dẫn đầy đủ của trang bên ngoài.

http://www.example.com/somepage.html ở vị trí của external.html (opt. 1 code)

Answer 4

Facebook khuyến khích việc sử dụng dữ liệu Open Graph Protocol để kéo loại siêu dữ liệu. Họ có cơ sở hạ tầng làm công việc của các trang cào và phân tích siêu dữ liệu có sẵn.

Bạn cho biết bạn đang sử dụng .NET, nếu đó là trường hợp thì có lẽ bạn có thể tận dụng các thư viện phân tích dữ liệu Graph mở cho mục đích của bạn: Xem OpenGraph-Net và OpenGraph .NET