怎么在js中获取当前url

在JavaScript中获取当前URL的方法有多种，包括使用window.location对象、document.URL属性等。window.location.href 是最常用的方式，因为它直接返回完整的URL。

JavaScript提供了多种方法来获取当前的URL信息，这对于前端开发中动态加载资源、进行页面导航、处理查询参数等操作非常重要。下面详细描述这些方法及其应用场景。

一、使用window.location对象

1. window.location.href

window.location.href 是获取当前URL最常用的方法，因为它直接返回完整的URL。 通过这种方式，你可以很方便地获取整个URL字符串，并且可以对其进行操作。

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

2. window.location对象的其他属性

除了href属性，window.location对象还包含其他有用的属性，例如：

window.location.protocol：返回当前URL的协议部分（如http:或https:）。
window.location.hostname：返回当前URL的域名部分。
window.location.port：返回当前URL的端口号（如果有）。
window.location.pathname：返回当前URL的路径部分。
window.location.search：返回当前URL的查询参数部分。
window.location.hash：返回当前URL的片段标识符（如果有）。

console.log(window.location.protocol); // 输出协议部分
console.log(window.location.hostname); // 输出域名部分
console.log(window.location.port);     // 输出端口号
console.log(window.location.pathname); // 输出路径部分
console.log(window.location.search);   // 输出查询参数部分
console.log(window.location.hash);     // 输出片段标识符

二、使用document.URL属性

document.URL属性也可以用来获取当前页面的完整URL。这种方法和window.location.href类似，但在某些特定的情况下可能会有所不同。

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

三、使用window.location.toString()

window.location.toString()方法也可以返回当前页面的完整URL。它实际上是调用了window.location.href的toString方法。

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

四、获取URL的查询参数

有时候，你可能只需要获取URL中的查询参数部分。可以使用URLSearchParams对象来解析查询参数，并进行相应的操作。

let queryParams = new URLSearchParams(window.location.search);
queryParams.forEach((value, key) => {
    console.log(`${key}: ${value}`);
});

五、实际应用场景

1. 动态加载资源

在单页应用（SPA）中，根据当前URL的不同部分（如路径、查询参数等）动态加载不同的资源或组件。

if (window.location.pathname === '/home') {
    // 加载主页的资源
} else if (window.location.pathname === '/about') {
    // 加载关于页的资源
}

2. 页面导航

可以根据当前URL的不同部分，动态调整页面的导航栏或菜单选项的显示状态。

let navLinks = document.querySelectorAll('nav a');
navLinks.forEach(link => {
    if (link.href === window.location.href) {
        link.classList.add('active');
    }
});

3. 处理查询参数

在表单提交后，可以根据URL中的查询参数，自动填充表单或进行其他操作。

let queryParams = new URLSearchParams(window.location.search);
let name = queryParams.get('name');
if (name) {
    document.querySelector('input[name="name"]').value = name;
}

六、推荐的项目管理系统

在团队管理和项目协作中，使用合适的项目管理系统能大大提高效率。推荐使用以下两个系统：

研发项目管理系统PingCode：专为研发团队设计，提供了全面的需求管理、缺陷跟踪和任务管理功能。
通用项目协作软件Worktile：适用于各种类型的团队，提供了任务管理、时间跟踪和团队协作等多种功能。

总结

在JavaScript中获取当前URL的方法非常多样，并且每种方法都有其独特的应用场景。通过熟练掌握这些方法，可以在开发中灵活地处理各种URL相关的需求，大大提高开发效率和代码的可维护性。