如何在html中获取网页链接的小缩略图
Posted
技术标签:
【中文标题】如何在html中获取网页链接的小缩略图【英文标题】:How to get a small thumbnail of a webpage link inside html 【发布时间】:2020-07-13 19:18:11 【问题描述】:我打算在我的 Gatsby 网页上显示其他人的博客文章列表作为链接。我不想在 html 中添加图像和标题,而是从博客文章/网页中提取信息。就像 WhatsApp 如何在附加的快照中获得一个小缩略图一样: 我是否必须从页面中提取信息,或者是否有图书馆可以为我做到这一点?
【问题讨论】:
当前页面的图片或历史中任何给定点的图片。 目前会很好.. 还提供了页面是否存在的线索 【参考方案1】:如果您拥有这些网站,您可以允许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://***.com/">***</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' src="" style="">
</iframe>
</div>
【讨论】:
我不拥有这些网站,所以这不是一个选择。看起来快照是要走的路。让我检查一下以上是关于如何在html中获取网页链接的小缩略图的主要内容,如果未能解决你的问题,请参考以下文章