Card link

original text : https://blog.imlete.cn/article/CardLink.html

Sometimes I often see Zhihu's articles , Or the link in the question is card

Compare card links with ordinary links , Card links are not only beautiful , Also show more information , Such as ： title 、 picture 、 Website, etc

Open source address : https://github.com/Lete114/CardLink

The effect is as follows

Realization principle

1. Request target link HTML
2. Get the results , Use new DOMParser() Parsing the request result HTML Content , And use dom API Analyze and obtain information ( If you are good, you can use regular expression matching )
3. Edit card linked HTML as well as CSS style
4. Insert the parsed information into the previously edited HTML In the template , And render to the current page

Potential problems

1. How to solve the cross domain problem of front-end requests
2. How to get the icon of the website (icon or cover)
3. If I get it (img or link) Labeled (src or href) How to solve the relative path
   Such as : (/img/xxx.png) (…/img/xxx.png) (./img/xxx.png)
4. If I get it img Labeled src by Loading Of base64 picture , The actual real picture address is data-src, How to solve

solve the problem

Cross-domain request

1. Set up a proxy server , Pass the target link to the proxy server , Let the proxy server request HTML Text and return
   Warehouse address : CardLink-Server
2. Use online free cross domain proxy
   ( The former is a cross domain request service built by bloggers , The latter is a free cross domain request service found online )
   https://cardlink-server.deta.dev/?url=
https://api.allorigins.win/raw?url=

Get the site icon

Get the target link HTML After parsing the text, get

body Next first img label —> Website icon

Solve the absolute path

Generally, we get dom After the element , Such as img label , In most cases, it is used directly .src obtain

This will lead to a very verification problem ,.src What you get is document.baseURI + img Labeled src

So you have to pass .getAttribute('src') obtain , Finally, use the target link + .getAttribute('src') that will do

The solution is Loading The problem of

If you get Loading base64 Give up the acquisition directly , Instead, get the website directly icon , If the site doesn't have icon Is displayed svg Small earth drawn

Small earth effect