用js怎么获取当前网站的网址

在JavaScript中获取当前网站的网址，可以使用window.location对象。该对象包含当前文档的URL信息。通过window.location，您可以方便地访问和操作URL的各个部分，如协议、主机名、路径名、查询字符串等。例如，您可以使用 window.location.href 来获取完整的URL。

一、window.location对象

window.location 是一个包含当前页面的URL信息的对象。它不仅能够获取URL，还可以用来跳转到新的URL。以下是 window.location 对象的常见属性：

window.location.href: 获取或设置整个URL。
window.location.protocol: 获取协议部分（如http:或https:）。
window.location.host: 获取主机名和端口号（如www.example.com:80）。
window.location.hostname: 获取主机名（如www.example.com）。
window.location.port: 获取端口号（如80）。
window.location.pathname: 获取路径部分（如/path/page.html）。
window.location.search: 获取查询字符串（如?name=value）。
window.location.hash: 获取URL的哈希部分（如#section1）。

二、获取完整URL

要获取当前网站的完整URL，您可以使用 window.location.href。以下是一个示例代码：

const currentUrl = window.location.href;
console.log(currentUrl); // 输出当前页面的完整URL

三、获取URL的各个部分

1、获取协议

协议部分包含了http或https。您可以使用 window.location.protocol 来获取：

const protocol = window.location.protocol;
console.log(protocol); // 输出 "http:" 或 "https:"

2、获取主机名

主机名部分包含了域名或IP地址。您可以使用 window.location.hostname 来获取：

const hostname = window.location.hostname;
console.log(hostname); // 输出 "www.example.com" 或 "127.0.0.1"

3、获取路径名

路径名部分包含了URL的路径部分。您可以使用 window.location.pathname 来获取：

const pathname = window.location.pathname;
console.log(pathname); // 输出 "/path/page.html"

4、获取查询字符串

查询字符串部分包含了URL中的参数部分。您可以使用 window.location.search 来获取：

const search = window.location.search;
console.log(search); // 输出 "?name=value"

5、获取哈希部分

哈希部分包含了URL中的锚部分。您可以使用 window.location.hash 来获取：

const hash = window.location.hash;
console.log(hash); // 输出 "#section1"

四、修改URL

除了获取URL，window.location 还可以用来修改URL。例如，要跳转到一个新的页面：

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

或者修改URL的某一部分：

window.location.pathname = '/newpath/page.html';

五、应用场景

1、单页应用（SPA）

在单页应用中，经常需要根据URL的变化来加载不同的内容。window.location 对象可以帮助您获取当前URL，进而决定显示哪些内容。例如：

const currentPath = window.location.pathname;
if (currentPath === '/home') {
  // 加载首页内容
} else if (currentPath === '/about') {
  // 加载关于页面内容
}

2、处理查询参数

在处理查询参数时，可以使用 window.location.search 获取查询字符串，然后解析出具体的参数。例如：

const urlParams = new URLSearchParams(window.location.search);
const name = urlParams.get('name');
console.log(name); // 输出查询参数中的 "name" 值

3、导航和重定向

使用 window.location.href 可以实现页面的导航和重定向。例如：

// 跳转到新的页面
window.location.href = 'https://www.example.com';
// 根据条件进行重定向
if (userNotLoggedIn) {
  window.location.href = '/login';
}

六、项目团队管理系统推荐

在项目团队管理中，选择合适的管理系统可以提高团队的协作效率。以下是两个推荐的项目管理系统：

研发项目管理系统PingCode：PingCode 是一款专注于研发项目管理的工具，提供了需求管理、任务分配、进度追踪等功能，适用于软件开发团队。
通用项目协作软件Worktile：Worktile 是一款通用的项目协作工具，支持任务管理、文件共享、日程安排等功能，适用于各类团队的项目管理需求。

七、总结

通过 window.location 对象，您可以方便地获取和操作当前网站的网址信息。无论是获取完整URL，还是获取URL的各个部分，window.location 都提供了简单而强大的方法。此外，结合具体的应用场景，您可以实现URL的导航、重定向以及查询参数的处理。在项目管理中，选择合适的管理系统，如PingCode和Worktile，也能进一步提升团队的协作效率。