JavaScript中href和replace的比较（详解）

在JavaScript中，href和replace方法都可以用来改变当前页面的URL地址，但它们有着不同的用法和效果。本文将详细介绍这两种方法的差异并提供相关示例，以帮助读者更好地理解。

href方法

使用href方法可以通过在当前窗口中打开新的URL地址。该操作会导致当前页面的所有状态丢失，包括页面的历史记录等。下面是href方法的代码示例：

//通过 href 方法在当前窗口中打开新的URL地址
window.location.href = "https://www.example.com";

请注意，该方法会导致其他脚本的执行被中断并且也不会再恢复（除非在新的页面中重新加载了这些脚本）。如果你希望在新的页面中打开URL地址而保留历史记录，你可以使用以下代码：

//使用 href 方法在新的页面中打开 URL 地址
window.open("https://www.example.com", "_blank");

replace方法

replace方法可以像href方法一样改变当前页面的URL，但它不会生成新的历史记录，这意味着用户将无法点击“后退”按钮回到前一个页面。下面是replace方法的代码示例：

//使用replace方法改变当前页面的URL地址
window.location.replace("https://www.example.com");

如果你希望在新的页面中打开URL地址而不保留历史记录，你可以使用以下代码：

//使用 replace 方法在新的页面中打开 URL 地址
window.open("https://www.example.com", "_blank", "replace=true");

示例说明

示例1：使用href方法打开新页面

下面是一个示例，使用href方法在当前窗口中打开新的URL地址：

<html>
<body>
<button onclick="openExample()">打开Example网站</button>
<script>
function openExample() {
  window.location.href = "https://www.example.com";
}
</script>
</body>
</html>

该代码显示了一个按钮，用户可以点击该按钮打开一个新的URL地址，并且历史记录和页面状态都将丢失。

示例2：使用replace方法替换当前页面

下面是一个示例，使用replace方法将当前页面的URL地址更改为新地址：

<html>
<body>
<button onclick="replaceExample()">替换当前页面为Example网站</button>
<script>
function replaceExample() {
  window.location.replace("https://www.example.com");
}
</script>
</body>
</html>

该代码显示了一个按钮，用户可以点击该按钮替换当前页面的URL地址为新地址，但是历史记录将被清除，用户不能通过点击“后退”按钮回到前一页。