资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

JS获取当前链接地址的多种方法及应用场景

创作时间:

作者:

@小白创作中心

JS获取当前链接地址的多种方法及应用场景

引用

来源

https://docs.pingcode.com/baike/2371486

在Web开发中，获取当前页面的链接地址是一个常见的需求。本文将详细介绍JavaScript中获取当前页面链接地址的各种方法及其应用场景，帮助开发者更好地理解和使用这些功能。

JS获取当前链接地址的方法有多种，如使用window.location.href、document.URL、window.location.pathname等。其中，最常用的方式是通过window.location.href来获取整个URL。以下将详细介绍这些方法，并探讨它们在不同场景下的应用。

一、`window.location.href`

window.location.href是获取当前页面完整URL最常用的方法。无论是开发单页面应用（SPA）还是多页面应用，它都能准确地提供当前页面的完整路径。

使用方法

let currentURL = window.location.href;
console.log(currentURL);

window.location.href返回一个包含协议、域名、端口号（如果有）、路径、查询参数和哈希部分的字符串。例如：https://www.example.com:8080/path/page.html?query=123#section

场景应用

这种方法适用于需要获取整个URL的场景，例如在进行页面重定向、分析URL参数或者记录用户访问路径时。

二、`document.URL`

document.URL与window.location.href类似，也可以用来获取当前页面的完整URL。然而，document.URL是一个只读属性，不能用于重定向。

使用方法

let currentURL = document.URL;
console.log(currentURL);

场景应用

document.URL适用于只需要读取当前URL而不进行页面跳转的场景。它在大多数情况下与window.location.href的输出一致。

三、`window.location.pathname`

window.location.pathname用于获取当前URL的路径部分，不包括协议、域名、端口号和查询参数。它返回一个字符串，表示从根目录开始的路径。

使用方法

let currentPath = window.location.pathname;
console.log(currentPath);

场景应用

这种方法适用于需要获取路径信息的场景，如在单页面应用中根据路径动态加载组件，或者在多页面应用中解析路径来确定当前页面的位置。

四、`window.location.search`

window.location.search用于获取URL中查询参数部分，包括问号（?）在内的字符串。它返回一个包含查询参数的字符串，可以使用URLSearchParams对象进一步解析。

使用方法

let queryParams = window.location.search;
console.log(queryParams);
// 使用URLSearchParams解析
let params = new URLSearchParams(queryParams);
console.log(params.get('query')); // 假设URL中包含?query=123

场景应用

这种方法适用于需要解析URL中的查询参数的场景，例如在表单提交后从URL中提取参数值，或者在单页面应用中根据查询参数进行页面内容的动态展示。

五、`window.location.hash`

window.location.hash用于获取URL中的哈希部分，包括井号（#）在内的字符串。它通常用于单页面应用中的锚点链接或在页面内进行导航。

使用方法

let hashValue = window.location.hash;
console.log(hashValue);

场景应用

这种方法适用于需要解析URL中的哈希部分的场景，例如在单页面应用中根据哈希值动态加载组件，或者在多页面应用中使用锚点进行页面内导航。

六、`window.location.hostname`

window.location.hostname用于获取URL中的主机名部分，不包括协议和端口号。它返回一个字符串，表示当前页面的域名或IP地址。

使用方法

let hostname = window.location.hostname;
console.log(hostname);

场景应用

这种方法适用于需要获取当前页面的域名信息的场景，例如在跨域请求中判断当前域名，或者在多环境部署中根据域名动态切换配置。

七、`window.location.origin`

window.location.origin用于获取URL中的协议、域名和端口号部分。它返回一个字符串，表示当前页面的基础URL。

使用方法

let origin = window.location.origin;
console.log(origin);

场景应用

这种方法适用于需要获取当前页面的基础URL的场景，例如在跨域请求中设置请求头，或者在多环境部署中根据基础URL动态切换配置。

八、常见应用场景

1、页面重定向

通过window.location.href可以实现页面重定向。例如，用户登录成功后跳转到首页：

if (loginSuccess) {
    window.location.href = '/home';
}

2、解析查询参数

使用window.location.search和URLSearchParams对象可以方便地解析查询参数。例如，从URL中获取搜索关键词：

let params = new URLSearchParams(window.location.search);
let keyword = params.get('q');
console.log(keyword);

3、动态加载组件

在单页面应用中，根据window.location.pathname动态加载组件。例如：

let path = window.location.pathname;
if (path === '/about') {
    loadAboutComponent();
} else if (path === '/contact') {
    loadContactComponent();
}

4、记录用户访问路径

通过window.location.href可以记录用户访问的完整路径。例如，在统计用户行为时：

function recordUserVisit() {
    let visitURL = window.location.href;
    // 发送visitURL到后台记录日志
}
recordUserVisit();

九、总结

JavaScript提供了多种方法来获取当前页面的链接地址，包括window.location.href、document.URL、window.location.pathname、window.location.search、window.location.hash、window.location.hostname和window.location.origin。这些方法各有适用场景，开发者可以根据具体需求选择合适的方法。

掌握这些方法不仅能帮助开发者在处理URL相关操作时更加灵活，还能提高代码的可读性和维护性。希望本文对你在实际开发中有所帮助。