使用jQuery和.NET从外部URL获取H标签和IMG SRC

Question

我有一个网络应用程序，我想从外部网页获取h1标签、第一张图片和前几行文本。我以前从未做过这个，认为最好使用jquery来完成，但我不确定。您能否指点我正确的方向或在.net和jquery中给出编码示例？谢谢。

我想的是，就像Facebook在帖子框中输入网址时会提取图片和几行内容。

- mlg74

---

如果可能的话，能否发布外部网页的URL？谢谢。 - guest271314

你对所有的h1标签感兴趣还是只对第一个感兴趣？至于这张图片，清晰明了吗？前五行文本没问题吧？ - PeterKA

Answer 1

由于CORS（跨源资源共享），您无法使用AJAX获取任何URL的标记，并且大多数网络站点不允许任何人使用其内容。在您的情况下，您应该在服务器上使用代理方法。

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

从那里，您有两个选择。要么在服务器上解析HTML，提取所需的所有数据，然后将其发送回客户端 OR 将所有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 字符串并查询数据。

- iMoses

Answer 2

选项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代理来获取页面。然后，您将进行类似于上面的调用，但您必须将

external.html替换为myproxy.aspx?url=http://www.example.com/somepage.html。

选项3：如果包含您想要获取的内容的其他服务器支持CORS，则无需使用服务器端代理，而只需提供外部页面的完整路径即可。

在(opt. 1 code)中external.html的位置上放置http://www.example.com/somepage.html

- PeterKA

Answer 3

你可以尝试使用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 调用文件名：//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
});

希望能有所帮助。

- reyaner

---

你在 PHP 中具体在做什么？我使用 .net，那你知道如何在 .net 中实现吗？ - mlg74

PHP部分正在请求URL的内容并将其打印出来。 - reyaner

Answer 4

Facebook鼓励使用Open Graph Protocol数据来提取此类元数据。他们有基础设施来抓取页面并解析可用的元数据。

您表示正在使用.NET，如果是这种情况，那么也许您可以利用解析Open Graph数据的库来实现您的目的：请参见OpenGraph-Net和OpenGraph .NET。

- artlung