如何使用 JavaScript 从 window.location（URL）中去除哈希而不刷新页面？

replaceState() 方法使用作为方法参数传递的状态对象、标题和 URL 替换当前历史记录条目。当你希望响应用户操作来更新当前历史记录条目的状态对象或 URL 时，此方法非常有用。

要移除 URL 中的哈希，使用历史 API 的 replaceState 方法移除哈希位置。

语法

replaceState() 方法的语法如下所示 -

window.history.replaceState(stateObj,"unused", "url")

此函数将接受三个参数。它们是 -

  • stateObj - 此参数与传递给 replace 方法的历史记录条目关联。此参数可以为 null。

  • URL - 如果新网址与当前网址不在同一源中，replaceState 会抛出一个异常。

示例 1

此示例演示了如何在 JavaScript 中将哈希从 URL 中去除 -

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scal=1.0">
   <title>Remove Hash from URL</title>
</head>
<body style="text-align: align-self: start;">
   <h1 style="color: orange">Tutorials Point</h1>
   <p>Removing the hash from window.location with JavaScript without page refresh </p>
   <p>modifying the current history state can also be done </p>
   <button onclick="modState()">
      History state Modification
   </button>
   <button onclick="remHash()">
      Remove hash from url
   </button>
   <script>
      function modState() {
         let stateObj = {
            id: "100"
         };
         window.history.replaceState(stateObj,
         "Untitled-1", "/answer#Untitled-1.html");
      }
      function remHash() {
         var uri = window.location.toString();
         if (uri.indexOf("#") > 0) {
            var clean_uri = uri.substring(0, uri.indexOf("#"));
            window.history.replaceState({}, document.title, clean_uri);
         }
      }
   </script>
</body>
</html>

更新于： 26-8-2022

3K+ 浏览量

开启您的 职业生涯

完成课程以获得认证

开始
广告