HTML：设置innerHtml时有没有办法显示链接预览？答案

【问题标题】：HTML: Is there a way to display a link preview when setting innerHtml?HTML：设置innerHtml时有没有办法显示链接预览？
【发布时间】：2021-02-11 18:30:43
【问题描述】：

我正在使用 javascript 设置元素的 innerHtml 属性。这是我正在设置的 innerHtml，它以 a-tag 发送链接，以便它可以点击：

description.forEach((pair) => {
   const [name, link] = pair;
   const htmlLink = `<a href=${link}>${link}</a><br><br>`
   const htmlPair = [name, htmlLink]
   joinedDescription.push(htmlPair.join(" "))
})

显示如下：

有没有办法显示链接预览，使其看起来像这样：

【问题讨论】：

是的，这是可能的，而且是一项巨大的工作。
要创建一个新行，只需加入<br>。所以：htmlPair.join("<br>") 但是，如果您专门讨论描述部分，则需要您获取每个 url 并从中获取某种文本（假设存在元描述是一种方法），或者将其添加到您的阵列手动。

标签： javascript html hyperlink innerhtml

【解决方案1】：

至于 HTML 本身，没有办法做到这一点。有人创建了这样显示链接的 CSS。可能有一些图书馆可以做到这一点，但我不确定。不幸的是，您可能必须自己制作它。对于视频，您必须使用 JavaScript 检查链接是否是 YouTube 视频并正确嵌入 iframe（使用 YouTube 嵌入）。对于其他链接，您必须获取标题/元数据并将其包装在 CSS 容器中。

【讨论】：