如何在 JavaScript 中获取地址栏中的 URL359

简介

在 JavaScript 中获取地址栏中的 URL 是 Web 应用程序中常见的任务。通过获取 URL，您可以访问当前页面的路径、查询字符串和其他信息。这对于许多任务很有用，例如：

跟踪页面浏览量和用户交互
读取查询字符串参数
设置或更新浏览器历史记录

方法

在 JavaScript 中，有几种方法可以获取地址栏中的 URL：

1.

最简单的方法是使用属性。它提供了一个只读对象，包含有关当前页面 URL 的信息。您可以使用以下属性访问 URL：

href：完整的 URL，包括协议、主机和路径
hostname：主机的名称（例如，“”）
pathname：当前路径（例如，“/about”）
search：查询字符串（例如，“?q=javascript”）
hash：URL 中的哈希（例如，“#section-1”）

例如，要获取完整的 URL，您可以使用以下代码：
```javascript
const url = ;
```

2.

另一个选项是使用属性。它返回当前页面的完整 URL，与使用相似。
```javascript
const url = ;
```

读取查询字符串参数

查询字符串参数是 URL 中附加到问号 (?) 后面的键值对。您可以使用以下方法读取查询字符串参数：

：一个包含查询字符串参数的字符串（例如，“?q=javascript”）
：一个只读的 URLSearchParams 对象，它允许您轻松访问参数（例如，您可以使用 .get() 方法来获取特定参数的值）
URLSearchParams 构造函数：您可以创建一个新的 URLSearchParams 对象，并将其用作普通对象来访问参数

例如，使用 .get() 方法获取查询字符串参数 q 的值：
```javascript
const params = new URLSearchParams();
const query = ("q");
```

更新浏览器历史记录

您可以使用属性来更新浏览器历史记录。它提供了一些方法来操作历史记录，包括：

()：添加一个新条目到历史记录，并更新 URL
()：替换当前历史记录条目，并更新 URL
()：后退到历史记录中的上一页
()：前进到历史记录中的下一页

例如，要使用 () 添加一个新条目到历史记录，您可以使用以下代码：
```javascript
({ foo: 'bar' }, 'Title', '/new-page');
```

最佳实践

在 JavaScript 中获取地址栏中的 URL 时，请考虑以下最佳实践：

避免使用 ()，因为它会直接替换当前页面
如果可能，请使用，因为它提供了一致的跨浏览器支持
谨慎地更新浏览器历史记录，确保您不会破坏用户导航

在 JavaScript 中获取地址栏中的 URL 是一个简单的任务，可以使用和属性。通过获取 URL，您可以访问有关当前页面的路径、查询字符串和其他信息，这对于许多 Web 应用程序任务很有用。请务必遵循最佳实践，以确保您正确地使用 URL。

2025-01-27

上一篇：PHP 和 JavaScript：异同解析

下一篇：[javascript宝典第7版] 权威指南，助您提升编程技能