如何将IMAGES页面的data-img-fullres正确传递给INDEX的模态框图片？

1. 修正IMAGES页面的消息发送逻辑 #

问题根源是IMAGES页面通过postMessage传递数据时没带上data-img-fullres的值，需要在发送数据时补充这个字段：

// IMAGES页面：给图片绑定点击事件，发送完整图片数据
document.querySelectorAll('img').forEach(img => {
  img.addEventListener('click', () => {
    const imgData = {
      title: img.dataset.title,
      author: img.dataset.author,
      link: img.dataset.link,
      thumbnail: img.src,
      fullres: img.dataset.imgFullres // 新增：获取原图地址（注意dataset的驼峰命名）
    };
    parent.postMessage(imgData, '*'); // 向父页面（INDEX）发送数据
  });
});

2. 修改INDEX页面的模态框与下载逻辑 #

在INDEX页面中，需要接收新增的fullres字段，替换原有的缩略图地址，同时为下载功能预留地址：

// INDEX页面：监听子页面（IMAGES）的消息
window.addEventListener('message', (e) => {
  // 增加fullres字段的存在判断，避免undefined错误
  if (e.data.title && e.data.author && e.data.fullres) {
    openImageModal(e.data);
  }
});

// 打开模态框的函数：改用原图地址
function openImageModal(data) {
  const modalImg = document.getElementById('modal-image');
  
  // 将原图地址赋值给模态框图片
  modalImg.src = data.fullres;
  // 把原图地址存到图片元素的dataset中，供下载功能使用
  modalImg.dataset.downloadUrl = data.fullres;
  
  // 原有逻辑：填充标题、作者等信息
  document.getElementById('modal-title').textContent = data.title;
  document.getElementById('modal-author').textContent = data.author;
  
  // 打开模态框（根据你的实际模态框实现调整）
  document.getElementById('image-modal').style.display = 'block';
}

// 下载按钮点击事件：使用原图地址下载
document.getElementById('download-btn').addEventListener('click', () => {
  const modalImg = document.getElementById('modal-image');
  const downloadUrl = modalImg.dataset.downloadUrl;
  
  if (downloadUrl) {
    const downloadLink = document.createElement('a');
    downloadLink.href = downloadUrl;
    // 自定义下载文件名（可根据标题调整）
    downloadLink.download = data.title || 'full-res-image.jpg';
    downloadLink.click();
  }
});

关键说明 #

• dataset的命名规则：HTML中的data-img-fullres对应JS里的img.dataset.imgFullres（短横线转驼峰），这是之前可能忽略的点，容易导致undefined。
• 增加字段存在判断：在接收消息时检查e.data.fullres是否存在，避免因数据缺失导致的报错。
• 下载功能依赖存储的原图地址：通过dataset.downloadUrl把原图地址暂存在图片元素上，点击下载时直接取用。

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