求助：基于LinkPreview API实现Div内所有链接自动追加预览内容的功能调整

没问题！我来帮你实现这个功能——捕获指定Div内的所有链接，并在每个链接后面自动追加对应的预览卡片。下面是完整的实现方案和代码示例：

1. 基础HTML结构 #

首先我们需要一个包含目标链接的Div，预览容器会通过JS动态创建并追加：

<div id="link-container">
  <a href="https://tomshw.it">Tom's Website</a>
  <a href="https://example.com">Example Domain</a>
  <a href="https://github.com">GitHub</a>
</div>

2. 美化预览卡片的CSS（可选） #

为了让预览结果更美观，给预览容器加一些基础样式：

/* 预览卡片的基础样式 */
.link-preview {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  display: flex;
  gap: 12px;
  background-color: #f9f9f9;
}

/* 预览图片的样式 */
.link-preview img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

/* 预览内容区域 */
.link-preview .preview-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 预览标题 */
.link-preview h4 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

/* 预览描述 */
.link-preview p {
  margin: 4px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

/* 预览链接地址 */
.link-preview .preview-url {
  font-size: 12px;
  color: #999;
}

3. JavaScript核心逻辑 #

这部分是功能实现的关键，我们会完成：获取链接、创建预览容器、调用API、渲染并追加预览内容：

// 替换成你的LinkPreview API Key
const API_KEY = "my-api-key";
// 替换成你要捕获链接的Div的ID
const TARGET_DIV_ID = "link-container";

// 获取目标Div和里面的所有链接
const targetDiv = document.getElementById(TARGET_DIV_ID);
const links = targetDiv.querySelectorAll("a");

// 遍历每个链接处理预览
links.forEach(link => {
  const linkUrl = link.href;
  
  // 创建预览容器元素
  const previewContainer = document.createElement("div");
  previewContainer.className = "link-preview";
  // 先显示加载状态
  previewContainer.innerHTML = "<p>正在加载预览...</p>";
  
  // 将预览容器追加到当前链接的后面
  link.after(previewContainer);
  
  // 调用LinkPreview API获取数据
  fetch("https://api.linkpreview.net", {
    method: "POST",
    mode: "cors",
    headers: {
      "Content-Type": "application/json" // 必须指定，否则API无法解析JSON请求
    },
    body: JSON.stringify({
      key: API_KEY,
      q: linkUrl
    })
  })
  .then(response => response.json())
  .then(previewData => {
    // 渲染预览内容，同时处理数据为空的情况
    previewContainer.innerHTML = `
      <img 
        src="${previewData.image || 'https://via.placeholder.com/80'}" 
        alt="${previewData.title || '预览图片'}"
      >
      <div class="preview-content">
        <h4>${previewData.title || '无标题'}</h4>
        <p>${previewData.description || '无描述内容'}</p>
        <div class="preview-url">${previewData.url || linkUrl}</div>
      </div>
    `;
  })
  .catch(error => {
    // 处理API请求失败的情况
    previewContainer.innerHTML = "<p>预览加载失败，请稍后重试。</p>";
    console.error("获取预览数据出错：", error);
  });
});

关键细节说明 #

• API请求头：必须添加Content-Type: application/json，否则API无法正确解析你发送的JSON数据
• 容错处理：为每个字段设置默认值（比如图片不存在时用占位图），避免数据不全导致页面显示异常
• 加载状态：请求API前先显示加载提示，提升用户体验
• 容器追加方式：使用link.after()直接把预览容器放到链接后面，操作更简洁

内容的提问来源于stack exchange，提问作者Marco Colia