js怎么获取请求地址

在JavaScript中，有多种方法可以获取请求地址，包括使用window.location对象、document.URL属性等。最常用的方法是通过window.location对象获取当前页面的URL、协议、主机名、端口号、路径名、查询字符串和哈希值。

一、使用 window.location 对象

window.location 是一个包含当前URL信息的对象，你可以通过它获取和操作URL的各个部分。

1. 获取完整的URL

你可以使用 window.location.href 获取当前页面的完整URL。

let currentURL = window.location.href;

console.log(currentURL);

2. 获取协议（http或https）

通过 window.location.protocol 可以获取当前URL的协议。

let protocol = window.location.protocol;

console.log(protocol); // 输出 "http:" 或 "https:"

3. 获取主机名

使用 window.location.hostname 获取主机名。

let hostname = window.location.hostname;

console.log(hostname); // 输出例如 "www.example.com"

4. 获取端口号

通过 window.location.port 获取当前URL的端口号。

let port = window.location.port;

console.log(port); // 输出例如 "80" 或 "443"

5. 获取路径名

使用 window.location.pathname 获取路径名。

let pathname = window.location.pathname;

console.log(pathname); // 输出例如 "/path/to/page"

6. 获取查询字符串

通过 window.location.search 获取查询字符串。

let search = window.location.search;

console.log(search); // 输出例如 "?id=123&name=John"

7. 获取哈希值

使用 window.location.hash 获取URL的哈希部分。

let hash = window.location.hash;

console.log(hash); // 输出例如 "#section1"

二、解析查询字符串

有时你需要解析查询字符串中的参数。你可以使用 URLSearchParams 对象来轻松完成这一任务。

let searchParams = new URLSearchParams(window.location.search);

let paramValue = searchParams.get('paramName');
console.log(paramValue);

三、重定向和修改URL

你还可以使用 window.location 对象来修改当前URL或重定向到新的URL。

1. 修改URL中的某个部分

你可以直接修改 window.location 对象的属性来改变URL。例如：

window.location.hash = '#newSection';

2. 页面重定向

你可以使用 window.location.href 或 window.location.assign 方法进行页面重定向。

window.location.href = 'https://www.newpage.com';

或者：

window.location.assign('https://www.newpage.com');

window.location.replace 方法与前两者类似，但不会在浏览器的历史记录中保留当前页面的记录。

window.location.replace('https://www.newpage.com');

四、更多关于URL操作的高级技巧

1. 构造新的URL

你可以使用 URL 构造函数来创建和操作新的URL。

let url = new URL('https://www.example.com/path?query=123#hash');

console.log(url.hostname); // 输出 "www.example.com"
url.searchParams.set('query', '456');
console.log(url.toString()); // 输出 "https://www.example.com/path?query=456#hash"

2. 处理相对URL

有时你需要处理相对URL，可以使用 URL 构造函数的第二个参数来实现。

let baseURL = new URL('https://www.example.com/');

let relativeURL = new URL('/path', baseURL);
console.log(relativeURL.toString()); // 输出 "https://www.example.com/path"

五、结论

通过掌握 window.location 对象和相关的URL操作方法，你可以轻松获取和操作请求地址。这些技巧不仅在开发过程中非常有用，而且可以帮助你更好地理解和控制网页的导航和重定向逻辑。无论是解析查询字符串、修改URL的一部分，还是构造和处理新的URL，这些方法都能满足你的需求。

相关问答FAQs：

1. 如何使用JavaScript获取当前页面的请求地址？
JavaScript提供了一个内置的全局对象window，可以通过window.location属性来获取当前页面的URL地址。具体代码如下：

var currentUrl = window.location.href;
console.log("当前页面的请求地址是：" + currentUrl);

2. 如何获取当前页面的主机名？
要获取当前页面的主机名，可以使用window.location.host属性。例如：

var hostname = window.location.host;
console.log("当前页面的主机名是：" + hostname);

3. 如何获取当前页面的路径名？
如果需要获取当前页面的路径名，可以使用window.location.pathname属性。以下是一个示例：

var pathname = window.location.pathname;
console.log("当前页面的路径名是：" + pathname);

4. 如何获取当前页面的查询参数？
如果需要获取当前页面的查询参数，可以使用window.location.search属性。例如：

var query = window.location.search;
console.log("当前页面的查询参数是：" + query);

5. 如何获取当前页面的哈希值？
要获取当前页面的哈希值（即URL中的#后面的部分），可以使用window.location.hash属性。以下是一个示例：

var hash = window.location.hash;
console.log("当前页面的哈希值是：" + hash);