javascript - 在客户端创建链接预览，就像在 Facebook/LinkedIn 中一样

Question

我正在创建一个带有输入框的网络应用程序，用户可以在其中输入任何内容，包括 URL。我想像 Facebook 和 LinkedIn 一样创建链接预览:

抓取给定的 URL 并显示其主要图像和标题，无需服务器往返。有没有办法在浏览器中执行此操作？

Answer 1

经过几个小时的谷歌搜索，我自己找到了答案......SO Is there open-source code for making 'link preview' text and icons, like in facebook? 中已经有一个问题.所以我们可以使用这个链接 http://api.embed.ly/1/oembed?url=YOUR-URL通过 http GET 我们得到 json 格式的元标签..我使用 JSdom 编写了自己的代码这是代码...

服务器端代码:

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

和 Angular 代码

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

一旦您获得 JSON 对象，您就可以以任何您想要的样式显示它。