location.href的用法

封面图 • 2025-09-21 • JavaScript

`location.href` 是 JavaScript 中用于获取或设置当前页面 URL 的属性。它是一个全局对象 `window.location` 的一部分，因此可以通过 `window.location.href` 或简写为 `location.href` 来使用。

### 语法：
```javascript
// 获取当前页面的 URL
var currentUrl = location.href;

// 设置新的 URL 并跳转到该页面
location.href = "https://www.example.com";
```

### 属性说明：
- **获取 URL**：通过 `location.href` 可以获取当前页面的完整 URL。
- **设置 URL**：通过赋值操作可以改变当前页面的 URL，从而实现页面跳转。

---

### 示例代码：

#### 1. 获取当前页面的 URL
```javascript
console.log(location.href); // 输出当前页面的完整 URL
```

#### 2. 跳转到新页面
```javascript
location.href = "https://www.google.com"; // 跳转到 Google 网站
```

#### 3. 使用 `replace()` 方法替代跳转（不保留历史记录）
如果不想在浏览器的历史记录中留下跳转痕迹，可以使用 `location.replace()`：
```javascript
location.replace("https://www.github.com"); // 跳转到 GitHub 并替换当前历史记录
```

#### 4. 动态修改 URL 参数
```javascript
var newUrl = location.href + "?param=value"; // 在当前 URL 后添加参数
location.href = newUrl;
```

---

### 注意事项：
1. **安全性**：当动态生成 URL 时，需要确保输入是可信的，避免注入攻击（如 XSS）。
2. **兼容性**：`location.href` 是标准属性，在所有主流浏览器中都支持。
3. **跳转行为**：使用 `location.href` 或 `location.replace()` 都会触发页面加载和重新渲染。

希望以上内容对你有所帮助！如果还有其他问题，请随时提问。