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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-07

浏览次数：次

返回列表

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

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

问题背景

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

解决方案：URLSearchParams

解决此问题的关键在于将必要的信息（例如，房产 ID）嵌入到 URL 中，使其成为一个可分享的、包含所有必要信息的链接。URLSearchParams 是一个强大的 J*aScript 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 数据中检索并显示相应的房产详情。

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 实现动态生成内容的分享链接：

野羊分类信息系统

===更新说明==解决了无法登陆后台的问题!完善了部分功能修复了一个BUG..修改静态模版说明:本系统的首页和内容页不支持动态显示,需要生成HTML(实为.asp文件)模版文件存放在temp目录下index.html为首页模版show.html为内容页模版......=============2007 - 10 - 20 ===========注：1*使用前请务必修改 inc/conn.as

0 查看详情野羊分类信息系统

index.html (列表页)




  房产列表


  

  <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>
            @@##@@
        </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>

        &lt;a href=&quot;property.html?id=${num}&quot; class=&quot;btn num&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; style=&quot;text-align:center;&quot; data-filter=&quot;${num}&quot;&gt;Részletek&lt;/a&gt;
        `;
      appendIn.appendChild(div);
    }

    fetch('./database/houses.json')
      .then(res => res.json())
      .then(json => {
        for (let value of json) {
          addElement(grid, value)
        }
      });
  </script>

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"
  }
]