js代码中怎么获取当前网址

在JavaScript代码中获取当前网址的方法有很多，主要包括使用window.location对象、document.URL属性、以及其他相关的属性。 其中最常用的方法是使用window.location.href，它返回当前页面的完整URL。下面我们详细介绍并演示这些方法。

// 获取当前网址的完整URL
var currentUrl = window.location.href;
console.log(currentUrl);

一、使用 window.location 对象

window.location 对象包含了当前文档的所有信息。通过这个对象，您可以获取到完整的URL、域名、路径以及查询参数等详细信息。

1. 获取完整URL

window.location.href 是最常用的方法，用于获取当前页面的完整URL。

var currentUrl = window.location.href;
console.log(currentUrl); // 输出完整URL

2. 获取域名

window.location.hostname 返回当前页面的域名。

var domain = window.location.hostname;
console.log(domain); // 输出域名

3. 获取路径

window.location.pathname 返回当前页面的路径部分。

var path = window.location.pathname;
console.log(path); // 输出路径

4. 获取查询参数

window.location.search 返回URL中的查询参数部分。

var queryParams = window.location.search;
console.log(queryParams); // 输出查询参数

5. 获取协议

window.location.protocol 返回当前页面使用的协议（如http或https）。

var protocol = window.location.protocol;
console.log(protocol); // 输出协议

6. 获取端口号

window.location.port 返回当前页面的端口号。如果页面使用默认端口（http的80或https的443），则返回空字符串。

var port = window.location.port;
console.log(port); // 输出端口号

二、使用 document.URL 属性

document.URL 也是一个简单的方法，可以直接获取当前页面的完整URL。这是一个只读属性。

var currentUrl = document.URL;
console.log(currentUrl); // 输出完整URL

三、获取特定部分的URL信息

有时候，我们可能只需要URL的一部分信息，例如协议、域名或路径。可以结合使用 window.location 对象的不同属性来获取这些信息。

1. 获取URL的协议和域名

var protocolAndDomain = window.location.protocol + "//" + window.location.hostname;
console.log(protocolAndDomain); // 输出协议和域名

2. 获取URL的路径和查询参数

var pathAndQuery = window.location.pathname + window.location.search;
console.log(pathAndQuery); // 输出路径和查询参数

四、处理URL中的哈希值

有些URL中包含哈希值（#号后面的部分），可以使用 window.location.hash 来获取。

var hashValue = window.location.hash;
console.log(hashValue); // 输出哈希值

1. 修改哈希值

您还可以通过设置 window.location.hash 来修改URL中的哈希值。

window.location.hash = "newHash";
console.log(window.location.hash); // 输出新的哈希值

2. 动态改变URL而不刷新页面

如果需要在不刷新页面的情况下改变URL，可以使用 history.pushState 或 history.replaceState。

// 使用pushState添加新的历史记录
history.pushState(null, null, "/new-path");
console.log(window.location.href); // 输出新的URL
// 使用replaceState替换当前的历史记录
history.replaceState(null, null, "/another-new-path");
console.log(window.location.href); // 输出替换后的URL

五、结合实践

在实际开发中，获取和操作URL是非常常见的需求。例如，您可能需要根据URL中的查询参数来调整页面内容，或在单页应用程序（SPA）中动态加载不同的组件。

1. 根据查询参数调整页面内容

function getQueryParam(param) {
    var urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(param);
}
var userId = getQueryParam('user');
if (userId) {
    console.log('User ID:', userId);
    // 根据userId加载用户信息
}

2. 在单页应用中动态加载组件

function loadComponent() {
    var path = window.location.pathname;
    if (path === '/home') {
        // 加载主页组件
    } else if (path === '/about') {
        // 加载关于我们组件
    } else {
        // 加载默认组件
    }
}
window.onpopstate = function() {
    loadComponent();
};
// 初次加载组件
loadComponent();

通过这些方法，您可以轻松地获取和操作当前页面的URL信息，从而实现更丰富的交互效果和功能。