JavaScript事件监听中无法获取跳转目标页DOM元素问题

• 已创建2个HTML页面，在JavaScript事件监听器中无法获取第二个HTML页面的元素
• 实现目标：用户点击任意商品时，将单商品详情页的图片、标题、描述替换为当前点击商品对应的内容
• 参考页面：
  • 商品列表页截图
  • 商品详情页截图

product.forEach(function (products) {
  products.addEventListener("click", function (curr) {
    location.href = "http://127.0.0.1:5500/single.html";

    // 第一个HTML页面的元素
    let productImg = curr.currentTarget.firstElementChild.firstElementChild;
    // 尝试获取第二个HTML页面的元素
    let img = document.querySelector(".sp-img");
  });
});

执行location.href跳转时，当前列表页的JS执行上下文会被立刻销毁，页面跳转到single.html后，原列表页的JS已经停止运行，根本无法操作新页面的DOM，自然拿不到第二个页面的.sp-img元素。

两种方案都可以实现需求，推荐优先用URL传参的方案，逻辑更清晰，不会有本地存储残留问题。

方案1：URL参数传递商品数据 #

1. 列表页点击商品时，先提取当前商品的图片、标题、描述信息，拼接到跳转URL的查询参数中，再执行跳转
2. 详情页自身加载完成后，从URL中解析出商品数据，直接操作自身DOM完成内容渲染

列表页修改后的代码：

product.forEach(function (productEl) {
  productEl.addEventListener("click", function (curr) {
    // 先提取当前点击商品的所有需要的信息
    const productImgSrc = curr.currentTarget.querySelector("img").src;
    const productTitle = curr.currentTarget.querySelector(".product-title").textContent;
    const productDesc = curr.currentTarget.querySelector(".product-desc").textContent;

    // 拼接带参数的跳转地址
    const jumpUrl = new URL("single.html", window.location.origin);
    jumpUrl.searchParams.set("img", encodeURIComponent(productImgSrc));
    jumpUrl.searchParams.set("title", encodeURIComponent(productTitle));
    jumpUrl.searchParams.set("desc", encodeURIComponent(productDesc));

    // 最后执行跳转
    location.href = jumpUrl.toString();
  });
});

在single.html（第二个详情页）中添加如下JS代码：

// 等详情页DOM加载完成再执行
window.addEventListener("DOMContentLoaded", function () {
  const searchParams = new URLSearchParams(window.location.search);
  // 解析参数
  const imgSrc = decodeURIComponent(searchParams.get("img") || "");
  const title = decodeURIComponent(searchParams.get("title") || "");
  const desc = decodeURIComponent(searchParams.get("desc") || "");

  // 给详情页元素赋值
  if (imgSrc) document.querySelector(".sp-img").src = imgSrc;
  if (title) document.querySelector(".sp-title").textContent = title;
  if (desc) document.querySelector(".sp-desc").textContent = desc;
});

注意：代码里的.product-title、.product-desc、.sp-title、.sp-desc选择器要替换成你自己页面实际的类名

方案2：sessionStorage临时存储商品数据 #

如果商品信息比较长，不想拼在URL里，可以用会话存储临时传数据：

1. 列表页点击商品时，把商品数据存在sessionStorage里再跳转
2. 详情页加载时从存储里读数据渲染，用完清除存储即可

列表页点击事件内跳转前添加代码：

// 提取完商品信息后，存入会话存储
sessionStorage.setItem("currentProduct", JSON.stringify({
  img: productImgSrc,
  title: productTitle,
  desc: productDesc
}));
location.href = "single.html";

详情页读取代码：

window.addEventListener("DOMContentLoaded", function () {
  const productData = JSON.parse(sessionStorage.getItem("currentProduct") || "{}");
  if (productData.img) document.querySelector(".sp-img").src = productData.img;
  if (productData.title) document.querySelector(".sp-title").textContent = productData.title;
  if (productData.desc) document.querySelector(".sp-desc").textContent = productData.desc;
  // 清除临时数据
  sessionStorage.removeItem("currentProduct");
});

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