Создавайте превью ссылок на стороне клиента, как в Facebook/LinkedIn

Я создаю веб-приложение с полем ввода, где пользователь может написать что угодно, включая URL-адреса. Я хочу создать предварительный просмотр ссылки, как Facebook и LinkedIn:

enter image description here

Очистите указанный URL-адрес и отобразите его основное изображение и заголовок без обхода сервера. Есть ли способ сделать это в браузере?

Ответы

Ответ 1

После нескольких часов работы в Интернете я нашел ответ сам. в SO . Поэтому мы можем использовать эту ссылку 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 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
});

Как только вы получите объект JSON, вы можете отобразить его в любом стиле, который вы хотите.

Ответ 2

Если кто-то все еще ищет ответ, я рекомендую вам увидеть http://ogp.me. Он работает на Messenger Telegram, Facebook, Discord и т.д.

Я сделал скелет его использования в этом проекте 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>

Ответ 3

Да, вы можете полностью создавать предварительные просмотры ссылок на клиенте, так как предварительные просмотры ссылок должны создаваться в любом случае, для эффективности и во избежание использования DOS на вашем сервере.

Чтобы найти клиентскую библиотеку, которая выполняет предварительный просмотр ссылок, найдите в "GitHub" "Предварительный просмотр ссылок" и сузьте область поиска до JavaScript.