使用JavaScript获取当前URL

技术背景

在前端开发中，有时需要获取当前页面的URL。JavaScript提供了多种方法来实现这一需求，这些方法主要通过Location对象来操作，Location对象是Window对象的一个属性。

实现步骤

1. 获取完整URL

可以使用window.location.href或document.URL来获取当前页面的完整URL。不过，document.URL在更新window.location时不会更新，所以推荐使用window.location.href。

// 使用 window.location.href 获取完整URL
let fullUrl = window.location.href;
console.log(fullUrl);

// 使用 document.URL 获取完整URL
let docUrl = document.URL;
console.log(docUrl);

2. 获取URL的各个部分

Location对象提供了多个属性来访问URL的不同部分，例如：

// 获取协议
let protocol = window.location.protocol;
console.log(protocol);

// 获取主机名
let hostname = window.location.hostname;
console.log(hostname);

// 获取端口号
let port = window.location.port;
console.log(port);

// 获取路径名
let pathname = window.location.pathname;
console.log(pathname);

// 获取查询字符串
let search = window.location.search;
console.log(search);

// 获取哈希值
let hash = window.location.hash;
console.log(hash);

// 获取源地址
let origin = window.location.origin;
console.log(origin);

3. 使用URL对象

可以使用URL构造函数创建一个URL对象，方便对URL进行解析和操作。

let url = new URL(window.location.href);
console.log(url.searchParams.get('name')); // 获取查询参数 name 的值

核心代码

以下是一些常用的获取URL的代码示例：

// 获取完整URL
console.log(window.location.href);

// 获取路径名
console.log(window.location.pathname);

// 使用 URL 对象解析查询参数
let url = new URL(window.location.href);
console.log(url.searchParams.get('param'));

最佳实践

• 获取完整URL：优先使用window.location.href，因为它会实时更新，而document.URL可能不会。
• 获取特定部分：使用Location对象的属性来获取URL的各个部分，如protocol、hostname等。
• 解析查询参数：使用URL对象的searchParams属性来解析查询参数，方便获取和操作。

常见问题

1. document.URL不更新问题

当更新window.location时，document.URL不会更新。所以在需要实时获取最新URL时，应使用window.location.href。

2. 框架、图像或表单中name="URL"的问题

如果页面中有框架、图像或表单的name="URL"，使用document.URL可能会出现问题，建议使用window.location.href。