咨询：JSON动态生成房产详情页链接无法分享的解决方案

解决这个问题的核心思路是用URL查询参数替代localStorage传递房源ID，这样链接就能正常分享，而且完全不需要创建多个详情页——单个property.html就能根据不同的ID参数加载对应房源内容。

步骤1：修改列表页的房源按钮 #

直接修改addElement函数里的详情按钮代码，把房源ID作为参数附加到URL上，同时移除不需要的onmousedown事件：

function addElement(appendIn, value) {
  let div = document.createElement('div');
  div.className = "box";

  let {
    num,
    fokep,
    utcanev,
    kerulet,
    ar,
    kepekszama,
    ingtipus,
    ingallapot,
    negyzetmeter
  } = value;

  div.innerHTML = `
    <div class="thumb">
        <p class="total-images"><i class="far fa-image"></i><span>${kepekszama}</span></p>
        <p class="type"><span>${ingtipus}</span><span>${ingallapot}</span></p>
        <img src="${fokep}" class="img" alt="">
    </div>

    <h3 class="name">${utcanev}</h3>
    <p class="location"><i class="fas fa-map-marker-alt"></i><span class="category">${kerulet}</span> Kerület</p>
    <div class="flex" style="justify-content:center; align-items:center">
            <p><span class="price">${ar}</span><i> M Forint</i></p>
            <p><i class="fas fa-maximize"></i><span>${negyzetmeter} m2</span></p>
     </div>

    <!-- 修改这里的href，添加ID参数，移除onmousedown事件 -->
    <a href="property.html?id=${num}" class="btn num" target="_blank" rel="noopener noreferrer" style="text-align:center;" data-filter="${num}">Részletek</a>
    `;
  appendIn.appendChild(div);
}

// 列表页的fetch逻辑保持不变
fetch('./database/houses.json')
 .then(res => res.json())
 .then(json => {
    for (let value of json) {
      addElement(grid, value)
    }
  });

同时删除原来的detailsClick函数，因为现在不需要通过它往localStorage存ID了。

步骤2：修改详情页的加载逻辑 #

把详情页从localStorage取ID的代码，改成从URL参数中提取，同时增加错误处理：

// 从URL参数中获取房源ID
const urlParams = new URLSearchParams(window.location.search);
let num = urlParams.get('id');

// 处理参数不存在的情况
if (!num) {
  alert('无效的房源链接');
  window.location.href = 'index.html';
  return;
}

fetch('./database/houses.json')
 .then(res => res.json())
 .then(json => {
    // 用find方法快速定位对应房源，比遍历更高效
    const targetHouse = json.find(house => house.num == num);
    
    if (targetHouse) {
      addDetailedElement(grid, targetHouse);
      addheadElement(head, targetHouse);
    } else {
      alert('未找到该房源');
      window.location.href = 'index.html';
    }
  })
 .catch(error => {
    console.error('加载房源数据失败:', error);
    alert('加载房源数据失败，请稍后重试');
  });

关键说明 #

• URL参数是公开携带在链接里的，任何人通过分享的链接打开详情页时，浏览器都会自动传递这个参数，详情页就能正确加载对应内容。
• 单个property.html页面可以处理所有房源的详情请求，完全不需要创建property1.html这类页面。
• 新增的错误处理逻辑能覆盖参数无效、房源不存在、数据加载失败等场景，提升用户体验。

内容的提问来源于stack exchange，提问作者David T Laszlo