js怎么获取当前网页url地址

通过JavaScript获取当前网页的URL地址的常用方法有：window.location.href、document.URL、window.location、window.location.pathname、window.location.search。这些方法可以帮助开发者获取不同部分的URL地址信息，接下来我们将详细介绍其中最常用的一种方法，即通过window.location.href获取完整的URL地址。

一、window.location.href

window.location.href 是获取当前网页完整URL地址最常用的方法之一。这个属性包含了完整的URL，包括协议、主机名、端口号、路径、查询字符串和哈希部分。

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

二、document.URL

document.URL 也是获取当前URL的一种常用方法，功能与window.location.href类似，但在某些旧版浏览器上可能会有差异。

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

三、window.location

window.location 是一个对象，包含了当前页面URL的多个部分。通过这个对象，我们可以获取到URL的各个组成部分。

var currentURL = window.location;
console.log(currentURL);

四、window.location.pathname

window.location.pathname 返回一个字符串，包含了URL的路径部分，即不包括协议、主机名和查询字符串部分。

var path = window.location.pathname;
console.log(path);

五、window.location.search

window.location.search 返回一个字符串，包含了URL中的查询字符串部分，即从问号开始的部分。

var queryString = window.location.search;
console.log(queryString);

六、window.location.hash

window.location.hash 返回一个字符串，包含了URL的哈希部分，即从井号开始的部分。

var hash = window.location.hash;
console.log(hash);

七、获取URL的各个部分

通过window.location对象，我们可以分别获取URL的协议、主机名、端口号、路径、查询字符串和哈希部分：

var protocol = window.location.protocol; // 协议
var hostname = window.location.hostname; // 主机名
var port = window.location.port;         // 端口号
var pathname = window.location.pathname; // 路径
var search = window.location.search;     // 查询字符串
var hash = window.location.hash;         // 哈希部分
console.log(protocol);
console.log(hostname);
console.log(port);
console.log(pathname);
console.log(search);
console.log(hash);

八、使用JavaScript操作URL

在实际开发中，我们往往不仅需要获取当前URL，还需要对URL进行操作。比如修改查询参数、跳转到新的页面等。下面介绍一些常用的操作方法。

修改URL中的查询参数

通过URLSearchParams对象，我们可以方便地操作URL中的查询参数。

var url = new URL(window.location.href);
var params = new URLSearchParams(url.search);
// 设置新的查询参数
params.set('key', 'value');
// 删除查询参数
params.delete('key');
// 获取查询参数
var value = params.get('key');
console.log(params.toString());

跳转到新的页面

通过修改window.location对象的属性，我们可以实现页面跳转。

// 跳转到新的URL
window.location.href = 'https://www.example.com';
// 跳转到新的路径
window.location.pathname = '/new-path';
// 跳转到新的查询字符串
window.location.search = '?key=value';
// 跳转到新的哈希部分
window.location.hash = '#new-hash';

九、实际应用示例

在实际应用中，我们通常需要将上述方法结合起来使用，以实现更复杂的功能。下面是一个实际应用的示例。

假设我们有一个网页，需要在加载完成后，检查URL中的查询参数是否包含特定的键值对，如果包含，则跳转到一个新的页面。

window.onload = function() {
    var url = new URL(window.location.href);
    var params = new URLSearchParams(url.search);
    if (params.has('redirect')) {
        var redirectURL = params.get('redirect');
        window.location.href = redirectURL;
    }
};

上述代码将在页面加载完成后，检查URL中的查询参数是否包含redirect键，如果包含，则获取其值并跳转到该URL。

十、总结

获取当前网页的URL地址是前端开发中非常常见的需求，JavaScript提供了多种方法来实现这一功能，包括window.location.href、document.URL、window.location等。通过这些方法，我们不仅可以获取到完整的URL，还可以分别获取到URL的各个部分。在实际开发中，我们往往需要结合这些方法来实现更复杂的功能，如修改查询参数、页面跳转等。

为了更好地管理和协作项目，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，这些工具可以帮助开发者更高效地进行项目管理和团队协作。