js 如何获取网页地址

在 JavaScript 中，可以通过多种方法获取当前网页的地址，包括 window.location 对象、document.URL 属性、以及 document.location 属性。这些方法都能有效地获取当前网页的 URL。 其中，window.location 是最常用且功能最全面的方法，它不仅可以获取当前的 URL，还可以解析和操作 URL 的各个部分。

一、WINDOW.LOCATION 对象

window.location 对象是浏览器中最常用的获取和操作 URL 的工具。它不仅可以获取当前的 URL，还可以解析和修改 URL 的各个部分。

1、获取当前URL

要获取当前网页的完整URL，可以使用 window.location.href 属性：

let currentURL = window.location.href;

console.log(currentURL);

2、解析URL各部分

window.location 对象提供了许多属性，可以解析 URL 的不同部分：

• window.location.protocol：返回协议部分（如 http: 或 https:）。
• window.location.hostname：返回域名部分（如 www.example.com）。
• window.location.port：返回端口号（如 8080）。
• window.location.pathname：返回路径部分（如 /path/to/page）。
• window.location.search：返回查询字符串（如 ?query=string）。
• window.location.hash：返回片段标识符（如 #section）。

3、修改URL

除了获取 URL，window.location 还可以修改 URL 并重新加载页面。例如，要重定向到另一个页面：

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

二、DOCUMENT.URL 属性

document.URL 属性也可以用来获取当前网页的 URL。虽然功能较为简单，但在某些情况下也非常有用。

let currentURL = document.URL;

console.log(currentURL);

三、DOCUMENT.LOCATION 属性

document.location 属性与 window.location 类似，可以获取和操作 URL，但不如 window.location 常用。

let currentURL = document.location.href;

console.log(currentURL);

四、实际应用场景

1、获取查询参数

在处理搜索或过滤功能时，获取查询参数是常见的需求。可以使用 URLSearchParams 对象来解析查询字符串：

let params = new URLSearchParams(window.location.search);

let value = params.get('key');  // 获取参数 "key" 的值
console.log(value);

2、动态导航

在单页应用（SPA）中，动态导航是关键功能。可以通过修改 window.location.hash 来实现页面的动态切换：

window.location.hash = '#new-section';

3、条件重定向

根据当前 URL 的某些条件，执行重定向操作：

if (window.location.pathname === '/old-page') {

    window.location.href = '/new-page';
}

五、最佳实践

1、使用 window.location.href 获取完整URL

window.location.href 是获取完整 URL 的最佳方法，因为它功能全面且易于使用。

2、使用 URLSearchParams 解析查询字符串

URLSearchParams 对象提供了简便的方法来解析和操作查询字符串，非常适合处理 URL 参数。

3、避免过度使用重定向

虽然可以通过修改 window.location 实现页面重定向，但应避免过度使用，因为这可能会影响用户体验和页面性能。

4、结合框架和库

在使用 JavaScript 框架（如 React、Vue 或 Angular）时，可以结合框架的路由功能来管理 URL。例如，在 React 中可以使用 react-router-dom 库来处理路由和导航。

通过以上方法和实践，您可以在 JavaScript 中灵活地获取和操作网页地址，以满足不同的开发需求。无论是获取当前 URL、解析查询参数，还是实现动态导航，window.location 和相关工具都能提供强大的支持。

相关问答FAQs：

1. 如何使用JavaScript获取当前网页的URL？
JavaScript提供了window.location对象，可以使用window.location.href属性来获取当前网页的URL。例如：

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

这将打印出当前网页的URL。

2. 如何使用JavaScript获取网页的域名？
如果你只需要获取当前网页的域名，可以使用window.location.hostname属性。例如：

var domain = window.location.hostname;
console.log(domain);

这将打印出当前网页的域名。

3. 如何使用JavaScript获取网页的路径和查询参数？
如果你需要获取当前网页的路径和查询参数，可以使用window.location.pathname和window.location.search属性。例如：

var path = window.location.pathname;
var query = window.location.search;
console.log("路径：" + path);
console.log("查询参数：" + query);

这将打印出当前网页的路径和查询参数。