js获取当前页url

在JavaScript中，获取当前页面的URL可以通过多种方式实现。以下是一些常用的方法：

基础概念

• URL: 统一资源定位符（Uniform Resource Locator），用于标识互联网上的资源。
• window.location: 这是一个包含有关当前窗口中显示文档的信息的对象。

获取当前页面URL的方法

1. 使用 window.location.href

这是最直接的方法，返回整个URL字符串。

let currentUrl = window.location.href;
console.log(currentUrl);

2. 使用 window.location.pathname

如果你只需要获取URL中的路径部分（不包括协议、域名和查询字符串），可以使用这个属性。

let pathName = window.location.pathname;
console.log(pathName);

3. 使用 window.location.search

这个属性返回URL中"?"后面的部分，即查询字符串。

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

4. 使用 window.location.origin

这个属性返回URL的协议、主机名和端口号。

let origin = window.location.origin;
console.log(origin);

应用场景

• 单页应用（SPA）: 在单页应用中，页面不会重新加载，但URL可能会改变。获取当前URL可以帮助应用了解用户当前的位置。
• 表单提交: 在提交表单时，可能需要将当前页面的URL作为参数发送到服务器。
• 分享功能: 用户可能需要分享当前页面的链接，这时获取当前URL就很有用。

可能遇到的问题及解决方法

问题: 获取到的URL包含不必要的片段标识符（#）

如果你不需要片段标识符（即URL中"#"后面的部分），可以使用以下方法去除：

let cleanUrl = window.location.href.split('#')[0];
console.log(cleanUrl);

问题: 在某些情况下 window.location 可能不可用

例如，在某些服务器渲染的环境中，window 对象可能不存在。这时，你可以使用条件判断来避免错误：

if (typeof window !== 'undefined') {
    let currentUrl = window.location.href;
    console.log(currentUrl);
} else {
    console.log('window object is not available');
}

通过这些方法，你可以灵活地获取和处理当前页面的URL，以适应不同的应用需求。