Как получить миниатюру ссылки на веб-страницу внутри html - PullRequest
Новая
       107

Как получить миниатюру ссылки на веб-страницу внутри html

0 голосов
/ 13 июля 2020

Я планирую показать список чужих постов в блогах в виде ссылки на моей веб-странице Gatsby. Вместо добавления работы по добавлению изображения и заголовка в html я хочу извлечь информацию из сообщения / веб-страницы в блоге. Например, как WhatsApp получает маленькую миниатюру в прикрепленной оснастке: нужно ли мне извлекать информацию со страницы или есть библиотека, которая может сделать это за меня?

1 Ответ

0 голосов
/ 13 июля 2020

Если вы владеете этими веб-сайтами, вы можете разрешить X-Frame-Options: ALLOW-FROM [uri]. Если вы этого не сделаете, большинство сайтов не будут работать.

В противном случае вам придется сделать снимок экрана и сохранить изображение вручную или по расписанию. 

$(document).ready(function() {
  var mouseX;
  var mouseY;
  $(document).mousemove( function(e) {
     mouseX = e.pageX; 
     mouseY = e.pageY;
  });  

  $('a').mouseover(function() {
    console.log('mouse over <a />');
    console.log(this.href);
    $('#previewFrame').attr('src', this.href);
    $('#frameContainer').css({'top':mouseY+20,'left':mouseX+20});
    $('#frameContainer').show();
  });
  
    $('a').mouseout(function() {
    console.log('mouse out of <a />');
    $('#frameContainer').hide();
  });
});
#frameContainer {
    display:none; position: absolute;
    background-color: #ffffff;
    height:1000px;
    width:1000px;
    overflow: hidden;
}

#previewFrame {
  transform-origin: left top;
  -webkit-transform:scale(0.2);
  -moz-transform-scale(0.2);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://www.bbc.com">BBC</a> - Works<br/>
<div>Other texts and page content....................<div>
<div>Other texts and page content....................<div>
<div>Other texts and page content....................<div>
<a href="https://www.cnn.com/">CNN</a> - Won't work<br/>
<div>Other texts and page content....................<div>
<div>Other texts and page content....................<div>
<div>Other texts and page content....................<div>
<div>Other texts and page content....................<div>
<a href="https://stackoverflow.com/">stackoverflow</a> - Won't work<br/>
<div>Other texts and page content....................<div>
<div>Other texts and page content....................<div>
<div id='divtest' style='display:none; position: absolute;'>This is a test</div>
<div id="frameContainer">
  <iframe id='previewFrame' width="500" height="500" src="" style="">
  </iframe>
 </div>
...