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

如何获取html当前url

admin
前端开发
2025-08-07
4

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

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

核心概念澄清

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

主流实现方案详解

原生JavaScript方案（推荐）

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

核心对象：`window.location`

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

如何获取html当前url 第1张

// 完整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框架中，由于页面无刷新特性,需监听路由变化事件：

// Vue示例（使用composition API）
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
export default {
  setup() {
    const currentUrl = ref('');
    const route = useRoute();
    watch(route, (newVal) => {
      currentUrl.value = window.location.href;
    }, { immediate: true });
    return { currentUrl };
  }
}

服务端渲染(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会自动计算绝对路径：

<head>
  <base href="/subdirectory/">
</head>
<!-此时window.location.href会返回绝对路径 -->

编码问题

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));
}