使用jquery和.net从外部url获取h标记和img src

Question

我有一个web应用程序，我想要从外部网页获取h1标记和第一个图像和前几行文本。我以前从来没有这样做过，我认为使用jquery做得最好，但我不确定。您能给我指出正确的方向吗?或者用.net和jquery给出一个编码示例？谢谢。

我在想，当你在邮箱中输入一个网址作为新帖子时，Facebook会把图片和几行字拉出来。

Answer 1

由于CORS (cross-origin resource sharing)的原因，您不能使用AJAX获取任何URL标记，并且web上的大多数站点都不允许任何人使用其内容。在这种情况下，您应该在服务器上使用代理方法。

创建一个接收URL并在服务器上获取其标记的操作，然后使用AJAX通过新操作请求页面HTML。

从那里你有两个选择。解析服务器上的超文本标记语言，提取所需的所有数据，然后将其发送回客户端或将所有超文本标记语言发送回客户端。我强烈建议使用服务器进行解析，它将使用更少的带宽，并且您的服务器可能比大多数浏览器提供更好的性能和速度。

如果您决定在客户端分析标记，最简单的方法是将HTML传递到根元素中，然后使用常规方法查询数据。

即

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

这里的缺点是，一旦您允许浏览器解析您的标记，它将自动加载任何存在的资源，例如图像。

我不使用.Net，所以我无法为您提供您可能需要的确切工具，但我建议您自己在服务器上查找完成这两个任务的方法。

1. 将给定的URL内容读取为字符串。
2. 使用任何给定的DOM解析器，将HTML字符串传递给它并查询数据。

Answer 2

你可以尝试混合使用jquery和php，或者你拥有的任何东西：

//requestExternalURL.php

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

使用ajax/jquery：

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

一个简单的.net调用filename: //requestExternalURL.aspx

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

再次使用ajax/jquery：

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

希望能有所帮助。

Answer 3

选项1:如果外部页面与调用页面位于同一台服务器上，则只需确保已包含最新版本的jQuery，然后设置以下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
    });
});

选项2:如果外部页面在另一台服务器上，您可能想要创建一个.NET代理来为您获取页面。然后，您将发出与上面类似的调用，但您必须替换

上面使用myproxy.aspx?url=http://www.example.com/somepage.html的external.html。

选项3:如果包含您想要获取的内容的另一台服务器支持CORS，则不需要服务器端代理，而只需提供外部页面的完整路径。

取代external.html的http://www.example.com/somepage.html (可选1个代码)