使用 URLSearchParams 实现动态生成内容的分享链接-js教程-PHP中文网

使用 URLSearchParams 实现动态生成内容的分享链接

花韻仙語

发布： 2025-10-07 10:51:48

原创

959人浏览过

使用 urlsearchparams 实现动态生成内容的分享链接

本文介绍了如何通过 URLSearchParams 解决动态生成内容的网页分享问题。通过将 ID 作为 URL 参数传递，使得分享的链接能够准确地在其他设备上重现相同的内容。文章详细讲解了如何在 HTML 中构建带参数的链接，以及如何在 JavaScript 中解析 URL 参数并用于动态内容生成。

问题背景

在动态生成内容的 Web 应用中，例如根据 JSON 数据动态生成房产列表，通常会遇到分享链接的问题。简单来说，如果详情页的内容依赖于本地存储（localStorage）或其他客户端数据，那么直接分享 details.html 这样的链接，在其他设备上无法正确显示，因为目标设备没有相应的本地数据。

解决方案：URLSearchParams

解决此问题的关键在于将必要的信息（例如，房产 ID）嵌入到 URL 中，使其成为一个可分享的、包含所有必要信息的链接。URLSearchParams 是一个强大的 JavaScript API，用于处理 URL 查询字符串。

1. 构建带参数的链接

首先，在生成列表的 HTML 代码中，修改详情链接的生成方式，将房产 ID 作为 URL 参数 id 的值：

<a href="property.html?id=${num}" class="btn num" target="_blank" rel="noopener noreferrer" style="text-align:center;" data-filter="${num}">Részletek</a>

登录后复制

这里，${num} 代表房产的唯一 ID。生成的链接类似于 property.html?id=123。

2. 解析 URL 参数

在详情页 property.html 中，使用 URLSearchParams 来提取 URL 中的 id 参数：

// 获取当前 URL
let url = window.location;

// 创建 URLSearchParams 对象
let params = new URLSearchParams(url.search);

// 获取 id 参数的值
let id = params.get('id');

console.log(`房产 ID 是: ${id}`);

// 使用 id 来获取并显示房产详情
fetch('./database/houses.json')
 .then(res => res.json())
 .then(json => {
    for(let value of json){
        if (id == value.num){
            addDetailedElement(grid, value);
            addheadElement(head,value);
        }
    }
});

登录后复制

这段代码首先获取当前页面的 URL，然后创建一个 URLSearchParams 对象，并使用 get('id') 方法来提取 id 参数的值。最后，使用这个 id 值从 JSON 数据中检索并显示相应的房产详情。

绘ai

ai绘图提示词免费分享

153

查看详情

3. 修改 detailsClick 函数 (可选)

如果之前的代码使用了 detailsClick 函数将 ID 存储到 localStorage 中，可以移除这个函数，因为现在 ID 直接从 URL 中获取。如果仍需兼容旧的 URL，可以在获取 ID 时优先从 URL 获取，如果 URL 中没有 ID，再从 localStorage 获取。

let url = window.location;
let params = new URLSearchParams(url.search);
let id = params.get('id');

if (!id) {
  id = localStorage.getItem("idIndex");
}

登录后复制

完整示例

以下是一个完整的示例，展示了如何使用 URLSearchParams 实现动态生成内容的分享链接：

index.html (列表页)

<!DOCTYPE html>
<html>
<head>
  <title>房产列表</title>
</head>
<body>
  <div id="grid"></div>

  <script>
    const grid = document.getElementById('grid');

    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>

        <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('./database/houses.json')
      .then(res => res.json())
      .then(json => {
        for (let value of json) {
          addElement(grid, value)
        }
      });
  </script>
</body>
</html>

登录后复制

property.html (详情页)

<!DOCTYPE html>
<html>
<head>
  <title>房产详情</title>
</head>
<body>
  <div id="head"></div>
  <div id="grid"></div>

  <script>
    const grid = document.getElementById('grid');
    const head = document.getElementById('head');

    function addDetailedElement(appendIn, value) {
      // 实现房产详情的显示逻辑
      appendIn.innerHTML = `<p>详细信息: ${JSON.stringify(value)}</p>`;
    }

    function addheadElement(appendIn, value) {
      appendIn.innerHTML = `<h1>房产: ${value.utcanev}</h1>`;
    }

    let url = window.location;
    let params = new URLSearchParams(url.search);
    let id = params.get('id');

    fetch('./database/houses.json')
      .then(res => res.json())
      .then(json => {
        for(let value of json){
            if (id == value.num){
                addDetailedElement(grid, value);
                addheadElement(head,value);
            }
        }
    });
  </script>
</body>
</html>

登录后复制

database/houses.json (示例数据)

[
  {
    "num": "1",
    "fokep": "image1.jpg",
    "utcanev": "Example Street 1",
    "kerulet": "District 1",
    "ar": "100",
    "kepekszama": "5",
    "ingtipus": "Apartment",
    "ingallapot": "Good",
    "negyzetmeter": "50"
  },
  {
    "num": "2",
    "fokep": "image2.jpg",
    "utcanev": "Example Street 2",
    "kerulet": "District 2",
    "ar": "200",
    "kepekszama": "10",
    "ingtipus": "House",
    "ingallapot": "Excellent",
    "negyzetmeter": "100"
  }
]

登录后复制