如何在HTML文档中动态显示URL指定部分并随URL变更同步更新

要实现把URL指定部分显示在HTML文档中，且URL变更时自动同步更新内容的需求，用JavaScript就能轻松搞定，具体步骤和示例如下：

1. 提取URL的指定部分 #

根据你要提取的内容类型，用对应的API获取：

• 提取URL查询参数（比如?key=i里的i）：使用浏览器原生的URLSearchParams API，简单可靠

  // 封装获取指定查询参数的函数
  function getUrlParam(paramName) {
    return new URLSearchParams(window.location.search).get(paramName);
  }
  

• 提取URL哈希片段（比如#section1里的section1）：直接读取window.location.hash并去掉开头的#

  function getUrlHash() {
    return window.location.hash.slice(1); // 去掉#号，返回哈希内容
  }
  

• 提取URL路径部分（比如/user/profile）：用window.location.pathname直接获取

2. 监听URL变化并同步更新内容 #

URL变化分两种场景：浏览器前进/后退，以及通过history.pushState/replaceState修改URL。后者不会触发默认的popstate事件，所以需要重写这两个方法来触发自定义事件：

// 重写history的pushState和replaceState方法，触发自定义的urlchange事件
const originalPushState = history.pushState;
history.pushState = function(...args) {
  originalPushState.apply(this, args);
  window.dispatchEvent(new Event('urlchange'));
};

const originalReplaceState = history.replaceState;
history.replaceState = function(...args) {
  originalReplaceState.apply(this, args);
  window.dispatchEvent(new Event('urlchange'));
};

接下来写一个更新页面内容的函数，再监听popstate和自定义的urlchange事件：

// 更新页面内容的函数，把获取到的URL部分插入到指定元素
function updatePageContent() {
  // 这里以提取key参数为例，你可以换成其他URL部分的获取逻辑
  const paramValue = getUrlParam('key');
  // 假设页面中有id为param-display的元素用来显示内容
  document.getElementById('param-display').textContent = paramValue || '未获取到参数';
}

// 页面加载完成后先执行一次，初始化显示内容
updatePageContent();

// 监听URL变化事件，触发内容更新
window.addEventListener('popstate', updatePageContent);
window.addEventListener('urlchange', updatePageContent);

3. 完整HTML示例 #

把上面的代码整合到HTML中，测试效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>URL参数动态显示示例</title>
</head>
<body>
  <div>
    <p>当前URL的key参数值：<span id="param-display"></span></p>
    <!-- 测试链接，点击会修改URL参数 -->
    <a href="?key=i">设置key=i</a>
    <a href="?key=test">设置key=test</a>
    <a href="?">清空参数</a>
  </div>

  <script>
    function getUrlParam(paramName) {
      return new URLSearchParams(window.location.search).get(paramName);
    }

    const originalPushState = history.pushState;
    history.pushState = function(...args) {
      originalPushState.apply(this, args);
      window.dispatchEvent(new Event('urlchange'));
    };

    const originalReplaceState = history.replaceState;
    history.replaceState = function(...args) {
      originalReplaceState.apply(this, args);
      window.dispatchEvent(new Event('urlchange'));
    };

    function updatePageContent() {
      const paramValue = getUrlParam('key');
      document.getElementById('param-display').textContent = paramValue || '未获取到参数';
    }

    updatePageContent();

    window.addEventListener('popstate', updatePageContent);
    window.addEventListener('urlchange', updatePageContent);
  </script>
</body>
</html>

注意事项 #

• 如果是通过外部链接跳转导致的URL变化，页面会重新加载，此时updatePageContent()会在页面加载时自动执行，显示新URL的内容。
• 可以根据实际需求修改updatePageContent函数，比如同时显示多个URL参数、路径或哈希内容。
• 确保页面中存在对应的元素（比如示例中的param-display）来承载要显示的内容。

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