有时候经常看到知乎的文章，或者问题中的链接是卡片式的
将卡片式链接与普通的链接相比，卡片式链接不仅美观，还展示更多信息，如：标题、图片、网址等
开源地址: github.com/Lete114/Car…
效果如下
实现原理
- 请求目标链接的 HTML
- 得到结果，使用
new DOMParser()解析请求结果的 HTML 内容，并使用 dom API 解析获取信息 (如果你厉害你可以使用正则表达式匹配) - 编辑卡片式链接的 HTML 以及 CSS 样式
- 将解析到的信息插入之前编辑好的 HTML 模板中，并渲染到当前页面
潜在的问题
- 如何解决前端请求跨域问题
- 如何获取网站的图标(icon 或 cover)
- 如果获取到的 (img 或 link) 标签的 (src 或 href) 为相对路径该如何解决 如: (/img/xxx.png) (../img/xxx.png) (./img/xxx.png)
- 如果获取到的 img 标签的 src 为 Loading 的 base64 图片，而实际真正的图片地址是 data-src，如何解决
解决问题
跨域请求
-
搭建代理服务器，将目标链接传给代理服务器，让代理服务器去请求 HTML 文本并返回 仓库地址: CardLink-Server
-
使用在线免费的跨域代理 (前者是博主自己搭建的跨域请求服务，后者是网上找的免费跨域请求服务)
https://cardlink-server.deta.dev/?url=https://api.allorigins.win/raw?url=
获取网站图标
得到目标链接的 HTML 文本后解析获取
body 下的第一个 img 标签 ---> 网站的 icon
解决绝对路径
一般情况下获取到 dom 元素后，如 img 标签，大部分情况下就直接使用 .src 获取
这会导致一个非常验证的问题，.src 获取到的是 document.baseURI + img 标签的 src
所以你要通过 .getAttribute('src') 获取，最后使用目标链接 + .getAttribute('src') 即可
解决获取到的是 Loading 的问题
如果获取到的是 Loading base64 则直接放弃获取，转而直接获取网站的 icon ，如果网站没有 icon 则显示 svg 绘制的小地球
