卡片式链接

本文介绍了如何创建卡片式链接,类似于知乎上显示的,包含标题、图片和网址信息。实现过程涉及请求目标HTML、解析DOM、处理跨域请求、获取网站图标等问题。遇到的挑战包括相对路径、加载中的图片以及使用代理服务器和正则表达式作为解决方案。此外,还提供了一个开源项目CardLink和解决跨域的代理服务器方案。
摘要由CSDN通过智能技术生成

原文: https://blog.imlete.cn/article/CardLink.html

有时候经常看到知乎的文章,或者问题中的链接是卡片式的

将卡片式链接与普通的链接相比,卡片式链接不仅美观,还展示更多信息,如:标题、图片、网址等

开源地址: https://github.com/Lete114/CardLink

效果如下

实现原理

  1. 请求目标链接的 HTML
  2. 得到结果,使用 new DOMParser() 解析请求结果的 HTML 内容,并使用 dom API 解析获取信息 (如果你厉害你可以使用正则表达式匹配)
  3. 编辑卡片式链接的 HTML 以及 CSS 样式
  4. 将解析到的信息插入之前编辑好的 HTML 模板中,并渲染到当前页面

潜在的问题

  1. 如何解决前端请求跨域问题
  2. 如何获取网站的图标(icon 或 cover)
  3. 如果获取到的 (img 或 link) 标签的 (src 或 href) 为相对路径该如何解决
    如: (/img/xxx.png) (…/img/xxx.png) (./img/xxx.png)
  4. 如果获取到的 img 标签的 src 为 Loading 的 base64 图片&#x
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值