如何点击Gallery页面链接动态修改Artwork页面内容（仿ArtStation）

我正在制作艺术作品集网站，因图片数量众多，通过JS读取JSON文件动态生成图片画廊内容。点击缩略图时，希望打开独立的artwork.html页面，展示对应图片的全屏原图及相关信息，无需为每张图片单独创建HTML页面（类似ArtStation的实现方式）。

尝试过用onclick事件，但无法在Gallery页面操作Artwork页面的DOM；也知道可以用模态框在同一页面实现，但想了解ArtStation这种跳转新页面的实现方式，猜测用到Ajax但作为新手不知如何操作。以下是简化示例代码：

gallery.html 代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>gallery</title>
    <style>
        img {
            width: 200px;
            display: block;
            margin: 3rem auto;
        }
    </style>
</head>

<body>
    <a href="artwork.html" class="img-link">
        <img src="image_thumbnail.jpg">
    </a>
</body>

</html>

artwork.html 代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Artwork Detail</title>
</head>

<body>
    <div class="img-container">
    </div>
</body>

</html>

尝试的JavaScript代码 #

const imgLink = document.querySelector('.img-link');
const imgContainer = document.querySelector('.img-container');

// 方案1：点击链接给第二个页面的div加内容（无效）
imgLink.addEventListener('click', function () {
    imgContainer.innerHTML = `<div>image information</div><img src="image.jpg">`;
});

// 方案2：打开第二个页面再加内容（无效）
imgLink.addEventListener('click', function (e) {
    e.preventDefault();
    window.open('artwork.html',self);
    imgContainer.innerHTML = `<div>image information</div><img src="image.jpg">`;
});

实现方案 #

核心思路是通过URL参数传递作品ID/唯一标识，然后在artwork.html中读取这个参数，再从JSON数据源里匹配对应作品的信息并渲染页面。具体步骤：

1. 准备作品数据JSON文件（比如artworks.json） #

把所有作品的信息统一存在这个文件里，方便动态读取：

[
  {
    "id": "1",
    "thumbnail": "image_thumbnail.jpg",
    "original": "image.jpg",
    "title": "作品标题1",
    "description": "这是作品1的详细描述，包含创作背景、使用工具等信息"
  },
  {
    "id": "2",
    "thumbnail": "image2_thumbnail.jpg",
    "original": "image2.jpg",
    "title": "作品标题2",
    "description": "这是作品2的详细描述，风格偏向抽象表达"
  }
]

2. 修改gallery.html的链接，携带作品ID参数 #

动态生成画廊时，给每个缩略图的链接加上?id=作品ID的参数（静态示例如下，动态生成时循环JSON数据即可）：

<a href="artwork.html?id=1" class="img-link">
  <img src="image_thumbnail.jpg">
</a>

3. 在artwork.html中添加JS，读取参数并渲染内容 #

在artwork.html的body末尾插入这段代码，负责读取URL参数、加载JSON数据并渲染页面：

// 从URL中提取作品ID参数
const urlParams = new URLSearchParams(window.location.search);
const artworkId = urlParams.get('id');

// 加载作品JSON数据并渲染
fetch('artworks.json')
  .then(response => response.json())
  .then(data => {
    // 找到对应ID的作品
    const targetArtwork = data.find(item => item.id === artworkId);
    if (targetArtwork) {
      const container = document.querySelector('.img-container');
      // 渲染作品内容
      container.innerHTML = `
        <h2>${targetArtwork.title}</h2>
        <p class="description">${targetArtwork.description}</p>
        <img src="${targetArtwork.original}" style="width:100%;max-width:1200px;display:block;margin:0 auto;">
      `;
      // 修改页面标题为作品标题
      document.title = targetArtwork.title;
    } else {
      // 未找到对应作品时的提示
      document.querySelector('.img-container').innerHTML = `<p>该作品不存在</p>`;
    }
  })
  .catch(error => {
    console.error('加载作品数据失败:', error);
    document.querySelector('.img-container').innerHTML = `<p>加载作品信息失败，请稍后重试</p>`;
  });

4. 补充说明 #

• 这个方案不需要后端支持，纯前端就能完成，完全符合你的需求；
• fetch是现代JavaScript的标准方法，用来加载JSON数据，比传统Ajax更简洁易用；
• 确保artworks.json和artwork.html在同一目录下，或者根据实际路径修改fetch的参数；
• 如果需要优化体验，可以添加加载动画，或者提前缓存JSON数据。

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