在前端开发中，我们经常需要处理网页的跳转和定位。JavaScript提供了一系列的API来实现这些功能，其中最常用的是 location 对象。本文将介绍如何使用 location.href 属性和一些常用的方法来处理网页跳转和定位。
location.href
location.href 属性表示当前页面的URL地址。通过修改它的值，我们可以实现网页跳转。例如，以下代码将把页面跳转到Google网站：
location.href = "https://www.google.com/";
在实际开发中，我们通常会将 location.href 与事件绑定一起使用，以便在用户执行某些操作时跳转到指定的网页。
除了直接赋值外，location.href 还可以通过 assign() 和 replace() 方法实现页面跳转。
assign()
assign() 方法用于加载新文档。它将把指定的URL地址分配给 location.href，并在浏览器历史记录中生成一条新的记录。例如，以下代码将加载一个新的文档：
location.assign("https://www.google.com/");replace()
replace() 方法用于替换当前文档。它将把指定的URL地址替换为 location.href，并从浏览器历史记录中删除当前记录。例如，以下代码将替换当前文档：
location.replace("https://www.google.com/");定位
location 对象还提供了一些方法来获取当前URL的不同部分。这些方法可以用于在网页中实现定位功能。
获取URL信息
location.href 属性返回完整的URL地址。如果只需要获取URL的某个部分，可以使用以下属性：
location.protocol：返回协议（如http、https等）。location.host：返回主机名和端口号。location.hostname：返回主机名。location.port：返回端口号。location.pathname：返回URL路径。location.search：返回查询字符串。location.hash：返回锚点名称。
例如，以下代码将输出当前页面的协议、主机名和路径：
console.log(location.protocol + "//" + location.host + location.pathname);
修改URL信息
除了获取URL信息外，location 对象还提供了一些方法来修改URL的各个部分。这些方法可以用于实现动态生成URL的功能。
location.reload()：重新加载页面。location.assign(url)：加载新文档。location.replace(url)：替换当前文档。location.search = queryString：修改查询字符串。location.hash = anchorName：修改锚点名称。
例如，以下代码会在查询字符串中添加一个参数 name，并跳转到新的URL：
var newQuery = location.search ? location.search + "&name=John" : "?name=John";
location.href = location.href.split("?")[0] + newQuery;总结
通过本文的介绍，我们了解了如何使用 location.href 属性和一些常用的方法来处理网页跳转和定位。同时，我们也学习了如何获取和修改URL的各个部分。在实际开发中，这些知识都非常重要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8688