javascript 在客户端创建链接预览，如 Facebook/LinkedIn
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24054691/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create link previews on the client side, like in Facebook/LinkedIn
提问by Srinath
I am creating a web app with an input box where the user can write anything, including URLs. I want to create a link preview like Facebook and LinkedIn does:
我正在创建一个带有输入框的 Web 应用程序，用户可以在其中编写任何内容，包括 URL。我想创建一个像 Facebook 和 LinkedIn 那样的链接预览：
Scrape the given URL and display its main image and heading, without a server round-trip. Is there a way to do this in the browser?
抓取给定的 URL 并显示其主图像和标题，无需服务器往返。有没有办法在浏览器中做到这一点？
采纳答案by Srinath
After hours of googling I found the answer myself.. there is already a question in SO Is there open-source code for making 'link preview' text and icons, like in facebook?. So we can use this link http://api.embed.ly/1/oembed?url=YOUR-URLvia http GET where we get the meta tags in json format.. I wrote my own code using JSdomand here goes the code...
经过数小时的谷歌搜索后，我自己找到了答案...... SO 中已经有一个问题，是否有开源代码用于制作“链接预览”文本和图标，就像在 facebook 中一样？. 因此，我们可以通过 http GET使用此链接http://api.embed.ly/1/oembed?url=YOUR-URL，我们可以在其中获取 json 格式的元标记。我使用JSdom编写了自己的代码，这里是代码...
Server side code:
服务器端代码：
app.post( '/scrapUrl/', function( req, res ) {
var jsdom = require( 'jsdom' );
var jsonRes = {};
jsdom.env( {
url: req.body.url,
scripts: [ "http://code.jquery.com/jquery.js" ],
done: function( error, window ) {
var $ = window.$;
$( 'meta' ).each( function() {
var name = $( this ).attr( 'property' );
var value = $( this ).attr( 'content' );
if ( name ) {
jsonRes[ name.slice( 3 ) ] = value;
console.log( name + ": " + value );
}
} );
res.send( jsonRes );
}
} );
} );
and the angular code
和角度代码
$http.post( '/scrapUrl/', {
url: url //send the url U need to scrape
} ).then( function( res ) {
console.log(res.data)//U get the meta tags as json object
});
Once you get the JSON object you can display it in whatever style you want.
获得 JSON 对象后，您可以以任何您想要的样式显示它。
回答by Default
If anybody is still looking for an answer, I recommend you to see http://ogp.me. It works on Telegram messenger, Facebook, Discord, etc.
如果有人仍在寻找答案，我建议您查看http://ogp.me。它适用于 Telegram Messenger、Facebook、Discord 等。
I did a skeleton of its usage in this project https://github.com/pBouillon/Sublime_text_snippets/blob/master/html_core.sublime-snippet
我在这个项目中做了一个它的使用框架https://github.com/pBouillon/Sublime_text_snippets/blob/master/html_core.sublime-snippet
<head>
<!-- open graph -->
<!-- Informations -->
<meta property="og:description" content="OPEN_GRAPH_DESCRIPTION" />
<meta property="og:title" content="OPEN_GRAPH_TITLE" />
<meta property="og:type" content="website" />
<meta property="og:url" content="WEBSITE_URL" />
<!-- Image -->
<meta property="og:image" content="URL_TO_IMAGE" />
<meta property="og:image:alt" content="Website icon" />
<meta property="og:image:height" content="80" />
<meta property="og:image:secure_url" content="URL_TO_IMAGE" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="80" />
<meta property="og:locale" content="en_GB" />
</head>回答by Dan Dascalescu
Yes, you can generate link previews completely on the client, which is how link previews should be generated anyway, for efficiency and to avoid DOS-ing your server.
是的，您可以完全在客户端上生成链接预览，无论如何，链接预览应该如何生成，以提高效率并避免对您的服务器进行 DOS 操作。
To find a client-side library that does link previews, search GitHub for "link preview", and narrow down the search to JavaScript.
要查找执行链接预览的客户端库，请在GitHub 中搜索“链接预览”，并将搜索范围缩小到 JavaScript。
