更改 URL 链接 JavaScript

在编写Web应用程序时，经常需要修改或更改URL链接。JavaScript是一种常用的编程语言，可以轻松地修改URL链接。下面将介绍如何使用JavaScript更改URL链接。

window.location.href属性

JavaScript中有一个window对象，它有一个location属性，可以用来访问当前页面的URL信息。我们可以使用window.location.href属性来获取或设置当前页面的URL。

首先，我们来获取当前页面的URL：

var currentUrl = window.location.href;
console.log(currentUrl); // 输出当前页面的URL

现在，我们可以将当前页面的URL更改为新的URL：

window.location.href = 'http://www.example.com';

这将把当前页面的URL更改为http://www.example.com。当我们在浏览器中运行此代码时，浏览器将自动跳转到新的URL。

window.location.replace()

我们还可以使用window.location.replace()方法来更改当前页面的URL。它与window.location.href属性类似，但有些不同。window.location.replace()方法将在更改URL之前导航到相应的URL，而window.location.href属性将导航到新的URL。

window.location.replace('http://www.example.com');

这将导航到http://www.example.com，而当前页面的URL将被替换为新的URL。

history.pushState()和history.replaceState()

HTML5提供了history.pushState()和history.replaceState()方法，可以更新浏览器的历史记录，同时更改当前页面的URL，但不会导航到新的页面。

history.pushState()方法将新的URL添加到浏览器的历史记录中，并更改当前页面的URL：

history.pushState(null, null, 'http://www.example.com');

现在，浏览器的历史记录中将包含新的URL，但未导航到新的URL。

history.replaceState()方法与history.pushState()方法类似，但它将替换当前页面的URL，而不是添加新的URL。

history.replaceState(null, null, 'http://www.example.com');

现在，当前页面的URL已更改为http://www.example.com，但未导航到新的URL。

总结

JavaScript提供了多种方式来更改URL链接。使用window.location.href属性和window.location.replace()方法可以轻松地导航到新的URL。使用history.pushState()和history.replaceState()方法可以更新浏览器的历史记录，同时更改当前页面的URL，但不会导航到新的页面。