在 JavaScript 中修改 URL 而不重新加载页面

在 JavaScript 中修改 URL 而不重新加载页面
在 JavaScript 中修改 URL 而不重新加载页面
Arthur Petit
2024年7月8日星期一 下午1:25:36

使用 JavaScript 动态更改 URL

使用现代 Web 应用程序时，您可能会发现自己需要修改 URL，而不触发页面重新加载。这对于创建无缝的用户体验特别有用。

在本指南中，我们将探讨更改 URL 域后部分的方法，包括允许您访问井号 (#) 符号前部分的技术。这可确保遵守跨域策略，同时实现所需的 URL 修改。

命令 描述
history.pushState() 将新条目添加到浏览器的会话历史记录堆栈中，无需重新加载页面即可更改 URL。
window.history.pushState() 使用新状态数据和新 URL 更新当前历史记录条目。
window.location.hash 获取或设置 URL 的锚点部分，位于井号 (#) 后面。
function changeURL(newPath) 定义一个使用 History API 更新 URL 路径的函数。
function updateHash(newHash) 定义更新 URL 哈希的函数。

JavaScript中URL修改详解

第一个脚本使用 history.pushState() 方法，它是 History API 的一部分。该命令允许开发人员向浏览器的会话历史堆栈添加新条目，从而有效地更改地址栏中显示的 URL，而无需重新加载页面。在剧本中， const newURL = "/page2.php"; 设置新路径，并且 history.pushState(null, "", newURL); 将 URL 更改为此新路径。通过包裹 history.pushState 类似函数中的命令 function changeURL(newPath)，我们可以根据需要动态更新URL。此技术对于内容动态更改而无需重新加载整个页面的单页应用程序 (SPA) 特别有用。

第二个脚本解决了使用以下命令更改 URL 哈希的问题 window.location.hash。此属性获取或设置 URL 中哈希符号 (#) 后面的锚点部分。通过设置 const hashValue = "newSection"; 和 window.location.hash = hashValue;，URL 哈希更改为 #newSection，无需重新加载页面。此方法对于在同一页面内导航或链接到文档中的特定部分非常有用。此外，该函数 function updateHash(newHash) 封装了此功能，可以轻松动态更改 URL 的哈希部分。这两个脚本都提供了无缝的方法来修改 URL 并通过避免不必要的页面重新加载来改善用户体验。

使用 History API 更改 URL 而无需重新加载

JavaScript 与 History API

const newURL = "/page2.php";
history.pushState(null, "", newURL);
// This changes the URL to /page2.php without reloading the page

function changeURL(newPath) {
    window.history.pushState({}, "", newPath);
}
// Example usage
changeURL("/page2.php");

无需重新加载即可操作 URL 哈希

用于修改哈希值的 JavaScript

const hashValue = "newSection";
window.location.hash = hashValue;
// This changes the URL hash to #newSection

function updateHash(newHash) {
    window.location.hash = newHash;
}
// Example usage
updateHash("newSection");

探索无需重新加载即可修改 URL 的其他方法

修改 URL 而不重新加载页面的另一个方面涉及使用 replaceState() 来自 History API 的方法。尽管 pushState() 添加新的历史记录条目， replaceState() 修改当前历史记录条目。当您想要更改 URL 而又不想使用户的历史记录因多个状态而混乱时，这会特别有用。例如，如果您有一个内容经常更改的单页应用程序，您可能希望更新 URL 以反映当前状态，而不是将每个更改添加到历史记录中。这使后退按钮功能保持简洁且用户友好。

使用 replaceState()，你可以写一个类似的函数 changeURL() 但改为调用 history.replaceState() 在里面。例如， function replaceURL(newPath) 可以利用 history.replaceState(null, "", newPath); 更新 URL。该技术通过保持 URL 与应用程序状态同步而无需创建不必要的历史记录条目，对于改善用户体验非常有价值。此外，它还提供了一种更有效的方法来管理浏览器的历史记录，尤其是在动态 Web 应用程序中。

关于在不重新加载的情况下修改 URL 的常见问题

  1. 有什么区别 pushState() 和 replaceState()？
  2. pushState() 向会话历史堆栈添加一个新条目，而 replaceState() 修改当前历史记录条目。
  3. 我可以在不重新加载页面的情况下更改 URL 哈希吗？
  4. 是的，通过使用 window.location.hash，您可以更改 URL 哈希而无需重新加载页面。
  5. 是否可以只修改URL的查询参数？
  6. 是的，您可以使用更新查询参数 pushState() 或者 replaceState() 方法无需重新加载页面。
  7. 是否修改 URL pushState() 影响后退按钮？
  8. 是的，每次致电 pushState() 创建一个新的历史记录条目，因此后退按钮将在这些状态之间导航。
  9. 我可以在所有浏览器中使用这些方法吗？
  10. 大多数现代浏览器都支持 History API，包括 pushState() 和 replaceState()，但始终检查兼容性。
  11. 使用时如何处理 popstate 事件 pushState()？
  12. 您可以收听 popstate 事件来处理活动历史记录条目中的更改并相应地更新 UI。
  13. 使用时URL格式不正确会出现什么情况 pushState()？
  14. 如果URL格式不正确， pushState() 会抛出错误，因此请确保您的 URL 格式正确。

结束主题

在 JavaScript 中修改 URL 而不重新加载页面可以通过创建更流畅的导航并避免不必要的页面重新加载来极大地改善用户体验。使用历史API pushState() 和 replaceState() 方法允许开发人员动态更新 URL，保持应用程序状态同步，而不会扰乱浏览器的历史记录。此外，操纵 URL 哈希可以提供高效的页内导航。理解和实施这些技术对于开发现代的响应式 Web 应用程序至关重要。