js如何获取页面链接

2026-02-20 21:05:12

JS 获取页面链接的几种方法包括：使用window.location对象、使用document.URL属性、使用document.location属性、以及使用window.history对象。其中，最常见且最推荐的方法是使用window.location对象。它不仅能获取当前页面的链接，还能解析链接的各个部分，如协议、主机名、路径和查询字符串等。下面，我们将详细探讨这些方法及其应用场景。

一、WINDOW.LOCATION 对象

window.location对象是JavaScript中最常用的获取页面链接的方法之一。它包含了当前页面URL的完整信息，并提供了各种操作URL的属性和方法。

1、获取完整URL

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

let currentURL = window.location.href;

console.log(currentURL); // 输出当前页面的完整URL

2、解析URL的各个部分

window.location对象不仅可以获取整个URL，还可以解析URL的各个部分，如协议、主机名、端口号、路径、查询字符串和哈希。

let protocol = window.location.protocol; // http:, https:

let hostname = window.location.hostname; // example.com

let port = window.location.port; // 80, 443

let pathname = window.location.pathname; // /path/page.html

let search = window.location.search; // ?query=123

let hash = window.location.hash; // #section

3、修改URL

window.location对象还提供了方法来修改当前页面的URL。

// 跳转到一个新的URL

window.location.href = "https://www.example.com";

// 重新加载当前页面

window.location.reload();

// 将浏览器的URL更新为一个新的URL而不重新加载页面

window.history.pushState(null, null, "/new-path");

二、DOCUMENT.URL 属性

document.URL属性也是一种获取当前页面URL的方法。它返回当前文档的完整URL。

1、获取完整URL

使用document.URL可以获取当前页面的完整URL。

let currentURL = document.URL;

console.log(currentURL); // 输出当前页面的完整URL

不过，document.URL属性的功能较为有限，不能像window.location那样方便地解析URL的各个部分。

三、DOCUMENT.LOCATION 属性

document.location属性与window.location属性几乎是等价的。它们的使用方法相同，均能获取和修改当前页面的URL。

1、获取完整URL

let currentURL = document.location.href;

console.log(currentURL); // 输出当前页面的完整URL

2、解析URL的各个部分

let protocol = document.location.protocol;

let hostname = document.location.hostname;

let port = document.location.port;

let pathname = document.location.pathname;

let search = document.location.search;

let hash = document.location.hash;

四、WINDOW.HISTORY 对象

window.history对象主要用于处理浏览器的历史记录，但它也可以间接地获取或修改当前页面的URL。

1、获取历史记录中的URL

window.history对象不能直接获取当前页面的URL，但可以通过与window.location配合使用来间接实现。

let currentURL = window.location.href;

console.log(currentURL); // 输出当前页面的完整URL

2、修改历史记录中的URL

使用window.history.pushState或window.history.replaceState方法可以修改历史记录中的URL。

// 将新的URL添加到历史记录中

window.history.pushState(null, null, "/new-url");

// 替换当前历史记录中的URL

window.history.replaceState(null, null, "/another-url");

五、应用场景与最佳实践

在实际开发中，选择合适的方法获取页面链接以及解析URL的各个部分是至关重要的。下面是一些常见的应用场景和最佳实践。

1、动态导航

在单页应用（SPA）中，动态更新URL而不重新加载页面是非常常见的需求。这时可以使用window.history.pushState或window.history.replaceState方法。

// 用户点击导航链接时更新URL而不重新加载页面

document.getElementById("nav-link").addEventListener("click", function() {

window.history.pushState(null, null, "/new-section");

// 还可以添加其他逻辑来更新页面内容

});

2、获取查询字符串参数

在处理URL的查询字符串参数时，window.location.search属性非常有用。可以将其解析为键值对，方便获取参数值。

// 将查询字符串解析为键值对

function getQueryParams() {

let params = {};

let queryString = window.location.search.substring(1);

let pairs = queryString.split("&");

for (let i = 0; i < pairs.length; i++) {

let pair = pairs[i].split("=");

params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);

}

return params;

}

let queryParams = getQueryParams();

console.log(queryParams); // 输出查询字符串参数对象

3、处理哈希导航

在某些情况下，使用URL中的哈希部分（例如，#section）来实现页面内导航是非常方便的。这时可以使用window.location.hash属性。

// 用户点击哈希链接时更新页面内容

window.addEventListener("hashchange", function() {

let hash = window.location.hash;

if (hash === "#section1") {

// 显示第一个部分

} else if (hash === "#section2") {

// 显示第二个部分

}

});

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

在团队协作和项目管理中，选择合适的工具可以大大提高效率。这里推荐两个非常优秀的系统：研发项目管理系统PingCode 和通用项目协作软件Worktile。

1、PingCode

PingCode是一款专为研发团队设计的项目管理系统。它提供了丰富的功能，包括需求管理、缺陷管理、测试管理和发布管理等。其强大的定制化能力和灵活的工作流设计，使得团队可以根据自身需求进行配置，提高研发效率。

2、Worktile

Worktile是一款通用项目协作软件，适用于各种类型的团队。它提供了任务管理、时间管理、文件共享和即时通讯等功能。其简洁的界面和强大的功能，使得团队可以轻松上手并高效协作。

总结来说，通过JavaScript获取页面链接有多种方法，最常用且推荐的是window.location对象。它不仅可以获取完整的URL，还可以解析URL的各个部分，并提供方法来修改URL。在实际应用中，根据具体需求选择合适的方法，能有效提高开发效率和代码的可维护性。同时，在团队协作中，选择合适的项目管理系统如PingCode和Worktile，也能极大地提升团队效率。

js如何获取页面链接

推荐阅读

友情链接