当前位置：首页 > 前端开发 > 正文

如何获取html当前url

admin
前端开发
2025-08-07
9

在浏览器环境中，可通过 window.location.href（JS）或 document.location.href

在Web开发中，获取当前页面的完整URL是一项基础且高频的需求，无论是用于数据分析、调试日志、分享功能还是路由控制，都需要准确提取用户所在的页面地址，以下从原理、实现方式、兼容性及典型场景出发,系统化解析这一需求的解决方案。

核心概念澄清

所谓“当前URL”，指的是用户浏览器地址栏中显示的完整网址，包含以下关键组成部分：

| 组件 | 示例值 | 作用说明 |

|————–|———————-|———————————–|

| 协议 | https: | 数据传输协议（http/https） |

| 域名+端口 | //example.com:8080 | 服务器地址与端口号 |

| 路径 | /path/to/page | 资源在服务器上的存储位置 |

| 查询参数 | ?name=john&age=25 | GET请求附带的键值对参数 |

| 哈希片段 | #section1 | 页面内锚点定位（不发送至服务器） |

不同编程语言和运行环境对URL的解析能力存在差异,需根据实际场景选择合适方案。

主流实现方案详解

原生JavaScript方案（推荐）

这是最通用且无需依赖第三方库的方式,适用于所有现代浏览器。

如何获取html当前url 第1张

核心对象：window.location

该对象提供了一组只读属性用于拆解当前URL：

// 完整URL（含哈希） console.log(window.location.href); // https://example.com/path?q=1#hash // 各组成部分独立获取 console.log(window.location.protocol); // "https:" console.log(window.location.host); // "example.com:8080" console.log(window.location.pathname); // "/path/to/page" console.log(window.location.search); // "?name=john&age=25" console.log(window.location.hash); // "#section1"

️ 注意事项：

search属性返回的是带问号的原始查询字符串，如需转为对象需手动解析： const params = new URLSearchParams(window.location.search); console.log(params.get('name')); // "john"
若需不含哈希的完整URL，可拼接前几项： const urlWithoutHash = `${window.location.protocol}//${window.location.host}${window.location.pathname}${window.location.search}`;

方法对比表

方法	返回值类型	是否包含哈希
window.location.href	字符串	跳转/复制完整URL
window.location.toString()	字符串	同上
new URL(document.baseURI).href	字符串	兼容老旧浏览器
document.location.href	字符串	与window.location等价

jQuery封装方案

对于已引入jQuery的项目,可通过以下方式简化操作：

// 获取完整URL const fullUrl = $(location).prop('href'); // 获取特定参数 const urlParams = new URLSearchParams($(location).prop('search')); const age = urlParams.get('age'); // "25"

单页应用(SPA)特殊处理

在Vue/React等SPA框架中，由于页面无刷新特性,需监听路由变化事件：

如何获取html当前url 第2张

服务端渲染(SSR)场景

若需在服务端获取客户端请求的原始URL（如Node.js）：

// Express框架示例 app.get('', (req, res) => { const clientUrl = `${req.protocol}://${req.get('host')}${req.originalUrl}`; console.log('客户端请求URL:', clientUrl); res.send(clientUrl); });

异常处理与边界情况

相对路径转换

当页面通过<base>标签修改基准路径时，window.location会自动计算绝对路径：

编码问题

URL中的中文字符会被自动编码为%E7%AC%AC...格式，解码时应使用decodeURIComponent：

const encodedName = '%E4%BD%A0%E5%A5%BD'; // "你好"的编码 const realName = decodeURIComponent(encodedName); // "你好"

安全限制

受同源策略影响，window.location无法获取跨域iframe内的URL,否则会抛出SecurityError。

实战案例：构建URL监控系统

假设需要实时监控用户访问路径并上报至后台：

// 初始化时发送一次 trackPageView(); // 监听popstate事件（前进/后退按钮） window.addEventListener('popstate', trackPageView); function trackPageView() { const urlInfo = { fullUrl: window.location.href, path: window.location.pathname, params: Object.fromEntries(new URLSearchParams(window.location.search)), timestamp: Date.now() }; navigator.sendBeacon('/analytics', JSON.stringify(urlInfo)); }