<think>我们正在讨论JavaScript中的`window
.location.href`属性。根据用户提供的引用和问题，我将解释其作用和用法。
引用[1]和[2]都提到了`window
.location.href`用于
页面导航，引用[3]和[4]则展示了其他
相关用法。
作用：
`window
.location.href` 是一个字符串属性，用于获取或设置当前窗口所显示的文档的完整URL。当设置这个属性时，浏览器会立即导航到新的URL。
用法：
1
. 获取当前
页面的完整URL：
```javascript
let currentUrl = window
.location.href;
console
.log(currentUrl);
```
2
. 跳转到新的
页面（会生成历史记录，可以回退）：
```javascript
window
.location.href = "https://www
.example
.com";
```
3
. 跳转到当前网站内的其他路由（单页
应用中也常用，但注意可能会引起
页面刷新，在单页
应用中通常使用路由库如React Router）：
```javascript
window
.location.href = "/about"; // 跳转到当前域名的/about路径
```
4
. 与其他
location属性的关系（引用[3]）：
- `window
.location` 是 `
location` 对象的引用，所以 `window
.location.href` 等价于 `
location.href`（在全局作用域中）。
- 另外，还有`parent
.location.href`（用于iframe中父窗口的URL）和`top
.location.href`（用于最顶层窗口的URL）。
5
. 示例：防止
页面被嵌套在iframe中（引用[3]）：
```javascript
if (window
.top
.location.href != window
.location.href) {
window
.top
.location.reload(); // 或者可以设置为跳转到当前
页面：window
.top
.location.href = window
.location.href;
}
```
6
. 获取当前URL的各个部分（引用[4]）：
- 通过字符串操作可以截取所需部分，例如获取域名+端口+路由（不包含查询参数）：
```javascript
let routerIndex = window
.location.href.indexOf('?');
let url = window
.location.href.slice(0, routerIndex > 0 ? routerIndex : window
.location.href.length);
```
注意：设置`window
.location.href`会触发
页面跳转，并且这个跳转行为可以被浏览器阻止（例如在beforeunload事件中返回字符串提示用户是否离开）。
与`window
.open()`的区别（引用[1]）：
- `window
.open(url, '_blank')` 会
打开一个新的浏览器窗口或标签页，而`window
.location.href`是在当前窗口进行跳转。
- `window
.open()`可以指定窗口参数（如大小、位置等），而`window
.location.href`只是简单的跳转。
相关问题：
1
. 使用`window
.location.href`跳转和HTML的`<a>`标签有何区别？
2
. 如何在不刷新
页面的情况下修改URL（使用HTML5 History API）？
3
. 如何获取URL中的查询参数？
4
. 使用`window
.location.href`跳转会触发哪些事件？</think>### JavaScript中`window
.location.href`的作用与用法详解
`window
.location.href`是JavaScript中用于**获取或设置当前
页面URL**的核心属性，属于BOM(Browser Object Model)的一部分。它直接控制浏览器的地址栏和
页面导航行为。
---
#### 🔍 **核心作用**
1
. **获取完整URL**
读取时返回当前
页面的完整地址（含协议、域名、路径、参数等）：
```javascript
console
.log(window
.location.href);
// 输出：https://example
.com/path?param=value#section
```
2
. **实现
页面跳转**
赋值时立即导航到新地址（**最常用功能**）：
```javascript
window
.location.href = "https://new-site
.com"; //
页面立即跳转
```
---
#### ⚙️ **关键特性**
| **特性** | **说明** |
|-------------------------|--------------------------------------------------------------------------|
| 历史记录 | 跳转时在浏览器历史栈添加记录，可通过后退按钮返回原
页面[^1] |
| 同源策略限制 | 不能通过它跨域访问其他窗口的URL（如iframe） |
| 触发
页面卸载 | 赋值时会触发`beforeunload`和`unload`事件[^2] |
| 支持相对路径 | `window
.location.href = "/new-page"` 会基于当前域名跳转 |
---
#### 💡 **典型使用场景**
1
. **基础
页面跳转**
```javascript
// 点击按钮跳转
document
.getElementById("btn")
.onclick = function() {
window
.location.href = "https://pikachu-lab
.com/xss-demo";
};
```
2
. **带参数传递**
```javascript
// 构造含参数的URL
const userID = 123;
window
.location.href = `profile
.html?id=${userID}`;
```
3
. **防止
页面被嵌套**（结合`top
.location`）
```javascript
// 如果当前
页面被嵌套在iframe中，则强制顶层窗口刷新[^3]
if (top
.location !== window
.location) {
top
.location.href = window
.location.href;
}
```
4
. **获取纯净URL**（移除参数）
```javascript
// 提取协议+域名+路径（不含参数）[^4]
const cleanUrl = window
.location.href.split('?')[0];
```
---
#### ↔️ **与`window
.open()`的区别**
| **对比项** | `window
.location.href` | `window
.open()` |
|--------------------|-------------------------------|-------------------------------|
| 窗口行为 | **替换当前页** | **新开标签页/窗口** |
| 历史记录 | 添加记录，可后退 | 独立历史栈 |
| 阻塞特性 | 同步跳转（阻塞代码执行） | 异步
打开（不阻塞后续代码） |
| 典型用例 | 站内导航/表单提交后跳转 |
打开广告/外部链接 |
> 示例：
> ```javascript
> // 当前页跳转（会卸载当前
页面）
> window
.location.href = "next
.html";
>
> //
新标签页
打开（原
页面保留）
> window
.open("next
.html", "_blank");
> ```
---
#### 🚫 **安全注意事项**
1
. **XSS攻击风险**
直接使用未过滤的用户输入构造URL会导致安全漏洞：
```javascript
// 危险！可能执行恶意脚本
const userInput = "<script>stealCookies()</script>";
window
.location.href = userInput;
```
**防御方案**：
```javascript
// 使用encodeURIComponent转义
const safeInput = encodeURIComponent(userInput);
window
.location.href = `/?param=${safeInput}`;
```
2
. **CSP限制**
现代浏览器通过Content Security Policy可阻止危险跳转：
```http
Content-Security-Policy: default-src 'self'; // 只允许同源跳转
```
---
### ❓
相关问题
1
. 如何通过JavaScript获取URL中的查询参数？
2
. `window
.location.replace()`和`
href`赋值有何区别？
3
. 单页
应用(SPA)中如何在不刷新
页面的情况下修改URL？
4
. 哪些场景下使用`
location.assign()`比直接赋值更合适？
> 参考资料：
> [^1]: `window
.location.href`赋值会添加历史记录
> [^2]:
页面跳转会触发卸载事件
> [^3]: `top
.location.href`用于控制顶层窗口
> [^4]: 字符串操作可提取URL纯净部分
本文介绍了一种使用JavaScript实现的替代传统window.open方法的弹窗方案，通过创建隐藏的a标签并利用点击事件来实现页面跳转，有效解决了浏览器对弹出窗口的限制问题。
扫一扫
7583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
