window.location.pathname和window.location.href

最新推荐文章于 2024-07-23 03:59:49 发布

奋斗吧程序媛

最新推荐文章于 2024-07-23 03:59:49 发布

阅读量841

点赞数 5

文章标签：前端

本文链接：https://blog.csdn.net/m0_67841039/article/details/139998900

版权

1.window.location.pathname
window.location.pathname 是一个 JavaScript 属性，它返回当前页面的 URL 中的路径部分。这个属性是 window.location 对象的一部分，window.location 对象包含了当前页面的 URL 信息。

例如，如果你的页面 URL 是 http://www.example.com/about/contact，那么 window.location.pathname 的值将会是 /about/contact。

使用 window.location.pathname 可以方便地获取和操作当前页面的路径。以下是一些使用场景：

检查当前页面是否是特定的页面：通过比较 pathname 的值与期望的页面路径。
动态改变页面标题：根据 pathname 来决定页面的标题。
页面路由：在单页面应用（SPA）中，根据 pathname 来决定加载哪个组件或视图。

这里是一些示例代码，展示如何使用 window.location.pathname：

// 检查当前页面的路径是否是 '/pageA.html'
if (window.location.pathname === '/pageA.html') {
    console.log('当前页面是页面A');
    // 执行页面A特有的逻辑
}

// 检查当前页面是否以 '/page' 开头
if (window.location.pathname.startsWith('/page')) {
    console.log('当前页面是页面的一部分');
    // 执行针对页面部分的逻辑
}

// 检查当前页面是否以 '.html' 结尾
if (window.location.pathname.endsWith('.html')) {
    console.log('当前页面是一个HTML文件');
    // 执行针对HTML文件的逻辑
}

// 获取当前页面的路径，并打印到控制台
console.log(window.location.pathname);

请注意，window.location.pathname 只返回路径部分，不包括查询字符串或哈希部分。如果你需要获取完整的 URL 路径，可以使用 window.location.href。

2.window.location.href
window.location.href 是一个 JavaScript 属性，它返回当前页面的完整 URL。这个属性是 window.location 对象的一部分，window.location 对象包含了浏览器当前加载页面的 URL 信息，包括协议（如 http 或 https）、主机名、端口号（如果有）、路径和查询字符串。

例如，如果你的页面 URL 是 https://www.example.com:8080/pageA.html?query=123#section1，那么 window.location.href 的值将会是整个 URL 字符串。

以下是一些使用 window.location.href 的常见场景：

获取当前页面的完整 URL：用于调试或记录用户的访问路径。
检查当前页面是否符合特定的 URL 模式：例如，检查 URL 中是否包含特定的查询参数或哈希值。
动态修改 URL：通过修改 window.location.href 的值，可以改变当前页面的 URL，这通常会导致页面跳转到新的 URL。

这里是一些示例代码，展示如何使用 window.location.href：

// 获取当前页面的完整 URL 并打印到控制台
console.log(window.location.href);

// 检查当前 URL 是否包含特定的查询参数
if (window.location.href.includes('?query=123')) {
    console.log('URL 中包含查询参数 query=123');
}

// 检查当前 URL 是否以特定的哈希值结尾
if (window.location.href.endsWith('#section1')) {
    console.log('URL 包含哈希值 #section1');
}

// 动态修改 URL 并导航到新的页面
window.location.href = 'https://www.example.com/newpage.html';

请注意，直接修改 window.location.href 属性会导致页面立即跳转到新的 URL，因此在使用时需要谨慎，以避免意外的页面跳转。如果你只是想检查 URL 而不触发跳转，可以使用 includes、startsWith、endsWith 等字符串方法来检查 window.location.href 的值。