在前端开发中，经常需要获取当前网页的地址，并对其进行相应的操作，比如跳转到其他页面，或者在某些场合下需要记录用户访问的地址等等。而要实现这些操作，我们需要借助 JavaScript 提供的 location 对象，其中的 href 属性就是用来获取当前网页地址的。

本文将围绕着 location.href 属性展开，介绍如何使用该属性获取当前网页地址，并探究其更深层次的应用。

一、location 对象简介

在了解 location.href 之前，我们首先需要了解 location 对象。在 JavaScript 中， location 对象包含了当前窗口中文档的地址相关信息，比如当前文档的 URL、主机名、端口号以及路径等等。下面我们来看一下 location 对象的一些常用属性和方法。

1. 常用属性

（1）location.href

该属性返回当前文档的完整 URL 字符串，包括协议、主机名、路径和锚点等。其中锚点是通过 "#" 符号来分隔的，如下所示：

```

http://www.example.com/test.html#section-1

```

可以看到，这个 URL 中包含了协议（http://）、主机名（www.example.com）、路径（test.html）以及锚点（section-1）。我们可以在 JavaScript 中通过访问 location.href 属性来获取当前文档的 URL，例如：

```

var url = location.href;

```

（2）location.host

该属性返回当前文档的主机名和端口号，不包括协议和路径。例如，对于以下 URL：

```

http://www.example.com:8080/test.html

```

该属性返回的值就是：

```

www.example.com:8080

```

我们可以在 JavaScript 中通过访问 location.host 属性来获取当前文档的主机名和端口号，例如：

```

var host = location.host;

```

（3）location.hostname

该属性返回当前文档的主机名，不包括端口号、协议和路径。例如，对于以下 URL：

```

http://www.example.com:8080/test.html

```

该属性返回的值就是：

```

www.example.com

```

我们可以在 JavaScript 中通过访问 location.hostname 属性来获取当前文档的主机名，例如：

```

var hostname = location.hostname;

```

（4）location.protocol

该属性返回当前文档的协议，通常是 http 或 https。例如，对于以下 URL：

```

http://www.example.com/test.html

```

该属性返回的值就是：

```

http:

```

我们可以在 JavaScript 中通过访问 location.protocol 属性来获取当前文档的协议，例如：

```

var protocol = location.protocol;

```

（5）location.port

该属性返回当前文档的端口号，如果 URL 中没有指定端口号，则返回空字符串。例如，对于以下 URL：

```

http://www.example.com:8080/test.html

```

该属性返回的值就是：

```

8080

```

我们可以在 JavaScript 中通过访问 location.port 属性来获取当前文档的端口号，例如：

```

var port = location.port;

```

（6）location.pathname

该属性返回当前文档的路径部分，即主机名之后到 "?" 符号之前的所有内容。例如，对于以下 URL：

```

http://www.example.com/test.html?page=1

```

该属性返回的值就是：

```

/test.html

```

我们可以在 JavaScript 中通过访问 location.pathname 属性来获取当前文档的路径部分，例如：

```

var path = location.pathname;

```

（7）location.search

该属性返回当前文档的查询部分，即 URL 中 "?" 符号后面的所有内容。例如，对于以下 URL：

```

http://www.example.com/test.html?page=1

```

该属性返回的值就是：

```

?page=1

```

我们可以在 JavaScript 中通过访问 location.search 属性来获取当前文档的查询部分，例如：

```

var search = location.search;

```

（8）location.hash

该属性返回当前文档的锚点部分，即 URL 中 "#" 符号后面的所有内容。例如，对于以下 URL：

```

http://www.example.com/test.html#section-1

```

该属性返回的值就是：

```

#section-1

```

我们可以在 JavaScript 中通过访问 location.hash 属性来获取当前文档的锚点部分，例如：

```

var hash = location.hash;

```

2. 常用方法

（1）location.reload()

该方法用来重新加载当前文档，会向服务器重新请求资源。如果该方法的参数为 true，则会强制从服务器重新获取资源，否则会从浏览器缓存中获取。例如：

```

location.reload(); // 重新加载文档

location.reload(true); // 强制从服务器重新获取资源

```

（2）location.assign()

该方法用来设置当前文档的 URL，会向服务器请求新的资源并替换当前文档。例如：

```

location.assign("http://www.example.com/new.html"); // 跳转到新页面

```

（3）location.replace()

该方法用来替换当前文档的 URL，不会向服务器请求新的资源，而是直接加载新的文档。例如：

```

location.replace("http://www.example.com/new.html"); // 加载新页面，并替换当前文档

```

二、location.href 的用途

了解了 location 对象后，我们来看一下 location.href 属性的用途。在前面已经提到过，该属性用来获取当前文档的完整 URL 字符串。除了获取当前文档地址之外，我们还可以借助该属性实现以下几个常见的需求。

1. 跳转到其他页面

通过修改 location.href 属性，我们可以跳转到其他页面，这是最常用的使用方式之一。例如，我们要跳转到网站首页，可以这样做：

```

location.href = "http://www.example.com/index.html";

```

这样就会在当前页面打开网站首页。如果要在新窗口中打开网站首页，可以这样做：

```

window.open("http://www.example.com/index.html");

```

这里使用了 window.open() 方法来打开新窗口，如果不指定第二个参数，则默认在当前窗口打开新页面。

2. 记录用户访问地址

在一些场合下，我们需要记录用户访问的地址，以便做一些后续处理。比如，当用户在社交平台中分享了一篇文章时，我们需要记录分享的文章 URL，以统计该文章的分享次数。这时，就可以借助 location.href 来获取所需信息，例如：

```

var url = location.href; // 获取当前文档 URL

```

获取到当前文档 URL 后，我们可以将其存储到服务器端或者本地存储中，以方便后续的统计和处理。

3. 拼接参数传递数据

在进行数据传递时，我们需要将数据以某种形式传递给目标页面。一种常见的方式是将数据作为查询字符串附加在 URL 后面。此时，我们可以通过拼接字符串的方式来实现该功能，例如：

```

var data = { name: "张三", age: 18 };

var url = "http://www.example.com/test.html" + "?data=" + encodeURIComponent(JSON.stringify(data));

location.href = url;

```

这里，我们先将数据转换为 JSON 字符串，并对其进行 URL 编码，然后将其作为查询字符串附加到 URL 后面，最后使用 location.href 跳转到目标页面。在目标页面中，可以通过 location.search 属性来获取查询字符串，然后将其解析为数据对象，例如：

```

var search = decodeURIComponent(location.search);

var data = JSON.parse(search.substring(6)); // 去掉前面的 "?data="

console.log(data.name); // 输出 "张三"

console.log(data.age); // 输出 18

```

这里，我们先对查询字符串进行 URL 解码，然后使用 JSON.parse() 方法将其解析为数据对象，从而获取到传递过来的数据。

三、location.href 的注意事项

在使用 location.href 时，我们需要注意以下几点：

1. 修改 location.href 属性会导致当前文档跳转到目标页面，如果当前文档尚未保存，那么在跳转之前需要先将其保存，否则会丢失未保存的修改。

2. 跳转到其他页面是一种同步行为，会导致当前页面停止响应，并且所有未完成的异步请求会被中止。如果需要异步处理一些任务，并且不希望跳转之后这些任务中止，可以考虑使用 window.open() 方法在新窗口中打开目标页面。

3. 在拼接参数时，需要对参数进行 URL 编码，否则可能会导致无法正常传递数据。特别地，对于一些特殊字符（如空格、+、&、/、# 等），需要使用 encodeURIComponent() 方法进行编码，否则可能会导致 URL 解析错误。

4. 由于 location.href 可以修改当前文档的 URL，如果传递给其某些非法参数（如危险脚本，或者用于跨站攻击的代码），可能会导致文档被恶意篡改或者窃取用户信息。因此，在使用 location.href 时，需要对传递的参数进行严格的检查和过滤，确保不会影响文档的安全性。

四、总结

location.href 属性是获取当前网页地址的最常用方式之一，也是实现跳转、数据传递等功能的重要工具。在前端开发中，我们经常需要借助该属性来实现各种功能，因此深入掌握其用法，对于提高开发效率和代码质量都是有帮助的。通过本文的介绍，相信读者已经对 location.href 有了较为全面的了解，希望对大家的实际开发工作有所裨益。