网站预览

Question

我正在开发一个项目，其中我有像Facebook一样的流发布， 用户还可以发布任何网站的链接，我想像facebook一样实现它，即当用户发布链接时，它会在文本框下面显示网站预览，我不知道我怎么能实现这个 我如何实现此功能，我正在使用Ajax调用在流上发布

$.ajax({
                url: "My Controller ActionResult",
                type: "POST",
                data: JSON.stringify({ objResourceModel: objResource, objTagList: TagTypeList, sendEmail: $("#chkbxSendEmail")[0].checked, groupId: ResourceVariable.GroupId, isblog: isblog, isquest: isquest }),
                dataType: "html",
                contentType: "application/json; charset-utf-8",
                beforeSend: function () {
                    $("#btnPost").attr("disabled", "disabled");
                    loading = setTimeout("$('#load').show()", 200);
                },
                complete: function () {
                    clearTimeout(loading);
                    $("#load").hide();
                    $("#btnPost").removeAttr("disabled");
                },
                success: function (Result) {
                    if (Result == "false") {
                        alert("Video must be of Youtube or vimeo");
                    }
                    else {
                        $('#divResourceDetails').html(Result);
                        ClearPostSectionData(); //function call
                        SetUpCommentSectionEvent(); //function call set up events
                        GetLatestAnnouncements();
                        $('#tagOutput').html("");
                        outputTagHtml = '';
                        TagTypeList = [];
                        //GetBrowseByInstructor(); //function call
                        //GetBrowseByTagType(); //function call
                        GetBrowseByResource(); //function call
                        GetBrowseByMonth(); //function call
                    }
                },
                error: function (msg) {
                    alert("Unable to save uploaded post details: " + msg.responseText);
                }
            });

Answer 1

由于您需要有效地解析远程站点上的HTML（对于头部中的元信息等内容），您需要检索HTML以进行处理。

虽然jQuery不会让你发送/接收来源（不同的域 - 请参阅http://en.wikipedia.org/wiki/Same_origin_policy） - 除了“填充JSON”（jsonp - http://en.wikipedia.org/wiki/JSONP） - 您的服务器代码可以！

您可以为URL创建一个HttpWebRequest（http://msdn.microsoft.com/en-us/library/system.net.httpwebrequest.aspx），然后由您决定是否发送要在客户端上解析的JavaScript代码的HTML，或者您可以在服务器上解析它并将结构化对象发送到客户端代码以简单地插入div。

通过解析HTML服务器端，它为您提供了将其缓存在数据库中的机会（如果其他人共享相同的URL），可能会对其进行分析并记录错误（您不希望服务器继续点击返回404的URL！）。

最终，您可能只想返回一个部分视图（因为您正在使用ASP.NET MVC），但您可能很聪明并根据内容类型返回专门的视图。例如，Facebook允许您在新闻Feed上现场观看YouTube视频，并在线显示图片。如果您共享网站，通常可以从您在共享页面中找到的一系列图片中进行选择。

Answer 2

我会快速使用页面中的iframe指向要共享的网址。这是为了您只需要页面预览而不是从该页面解析html以提取像Facebook那样的元数据。