window.location.pathname和window.location.href

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 信息,包括协议(如 httphttps)、主机名、端口号(如果有)、路径和查询字符串。

例如,如果你的页面 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 而不触发跳转,可以使用 includesstartsWithendsWith 等字符串方法来检查 window.location.href 的值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/861220.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI X HI:塑造数智时代的人类镜像,网易这场分享不能错过!

2001 年,网易正式成立在线游戏事业部。从那以后,网易孵化了许多出圈的精品游戏,跻身成为全球七大游戏公司之一。这些游戏产品之所以能够广受玩家好评,并保持常青,一方面源于十年磨一剑的精良品质,另一方面则…

[油猴脚本] Image To Ascii 快速转换审计网站图片中敏感信息插件

项目地址:https://github.com/MartinxMax/ImageToAscii 导入 将ImagetoAscii.user.js导入油猴 进行按照 访问网站分析图片 当鼠标靠近图片时会出现分析按钮 通过审查图片信息,我们可以快速发现这张图片存在PHP代码。 当然在渗透测试中,你可以快速查看上传的图片木马中PHP代码…

PS系统教程30

图层蒙版组合使用 案例介绍 全选背景图-复制背景图粘贴背景图CtrlI反选背景色填充黑色快速选区工具框柱需要素材画笔涂抹白色 步骤截图 1-3 4-5 图层蒙版与渐变工具结合使用 案例2 注意 使用PS的渐变工具覆盖全部的原因可能包括操作不当或设置错误。 操作不当&#xff1…

【小学期】实体类设计——以学生管理系统为例

项目目录中的位置 将Student.java文件放在src/model目录中,即: student_management │ ├── src │ ├── model │ │ ├── Student.java // 这里是Student实体类 │ │ └── StudentDAO.java │ │ │ ├── view │ │ …

C++系列-String(三)

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” assign 这个接口的目的是用一个新的值代替之前的那个值 #define _CRT_SECURE_NO_WARNINGS #include<iostream> #include<string> #include<list> #include&l…

Oracle对用户敏感数据进行编码处理

由于系统运行时间比较长&#xff0c;没有对用户的身份证号、邮箱、手机号进行脱敏处理&#xff0c;后期对数据进行了编码。 更新表数据 sql UPDATE sys_staff SET MOBIL_PHONE CASEWHEN MOBIL_PHONE IS NULL THEN ELSE utl_raw.cast_to_varchar2(utl_encode.base64_encode(ut…

华三交换机的软件版本升级操作

升级操作很常见&#xff0c;掌握方法是关键 实验环境&#xff1a;1台华三S6520-EI交换机&#xff0c;版本从2432P03升级成2432P05。 整体思路&#xff1a; 1.先查验软件版本 2.官网下载对于设备型号的软件版本 3.配置交换机地址使得与电脑进行通信&#xff0c;使用TFTP/FTP工…

【绝对有用】c++ 将应该整型数组的值字符串化拼接、将字符串通过逗号分割开来并转化为整型、如何查找逗号的位置、字符串中根据区间取值

在 C 中&#xff0c;你可以使用 std::ostringstream 将整型数组的值转换为字符串并进行拼接。下面是一个简单的示例代码&#xff1a; #include <iostream> #include <sstream> #include <vector>std::string joinIntegers(const std::vector<int>&…

Swift 周报 第五十五期

文章目录 前言新闻和社区苹果公司据悉将推出密码管理应用三大指数涨跌不一&#xff0c;苹果重新夺回美股第二大上市公司宝座苹果iOS 18新动向&#xff1a;AI功能强化隐私保护&#xff0c;用户自主选择启用 提案通过的提案正在审查的提案 Swift论坛推荐博文话题讨论关于我们 前言…

微信小程序navigateTo异常(APP-SERVICE-SDK:Unknown URL)

背景 在开发小程序时&#xff0c;可能会用到banner&#xff0c;通过banner跳转至各种子页面。但是因为小程序自身的因素&#xff0c;有些是不允许的&#xff0c;比如通过banner跳转一个http/https链接。如果使用 wx.navigateTo完成跳转时&#xff0c;就会发生异常。 navigate…

解析json字符串的方法

java,json的序列化库&#xff1a; fastjsongson&#xff08;相对安全&#xff09;jacksonjsonlibkryo gson 反序列化fronjson 序列化&#xff1a;tojson

第二十八周代码

B3631 单向链表 题目链接 【参考代码】 list的简介及使用 80%通过率 #include <bits/stdc.h> using namespace std;int main() {list<int> list;list.push_back(1);int q;cin>>q;while(q--){int operation;cin>>operation;if(operation 1){int x,…

Java高手的30k之路|面试宝典|精通MySQL(一)

MySQL Server架构 组件详解 连接管理 连接处理&#xff1a;通过TCP/IP、Unix Socket、Named Pipe等协议接受客户端连接。使用线程池技术来高效地管理连接。认证和授权&#xff1a;在连接建立后&#xff0c;MySQL对用户进行认证&#xff0c;并根据用户权限执行相应操作。 查询…

高考成绩加分,西藏学生推荐使用的《藏文翻译词典》APP,藏文作文高考大纲,初中高中学习内容与考试同步更新!

2024年高考成绩出炉啦&#xff01;在这个特别的时刻&#xff0c;我想向大家表达最真挚的祝贺。高考不仅是一场考试&#xff0c;更是你多年学习旅程的一次总结。当你的成绩揭晓&#xff0c;无论结果如何&#xff0c;你都应该为自己感到骄傲。 在高原&#xff0c;藏语如同雪山上…

【vue scrollTo 数据无限滚动 】

vue数据无限滚动 参考来源 Vue3 实现消息无限滚动的新思路 —— 林三心不学挖掘机 完整代码中项目中使用了vuetify&#xff0c;估div内的class会代表了对应的样式&#xff0c;根据需要自行删减。 功能实现主要依赖js代码部分。 鼠标悬浮停止滚动&#xff0c;鼠标离开恢复滚动在…

C#+uni-app医院HIS预约挂号系统源码 看病挂号快人一步

​​​​​​​ 提到去大型医院机构就诊时&#xff0c;许多人都感到恐惧。有些人一旦走进医院的门诊大厅&#xff0c;就感到迷茫&#xff0c;既无法理解导医台医生的建议&#xff0c;也找不到应该去哪个科室进行检查。实际上&#xff0c;就医也是一门学问&#xff0c;如何优化…

浏览器插件的开发

文章目录 构成使用vue编写插件插件中向其他服务器发送请求 官方文档地址&#xff1a; https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world?hlzh-cn 构成 插件目录的主要构成&#xff1a; manifest.json文件&#xff1a;描述了扩展程序的功能和…

刚体力学基础

转动惯量 刚体 转动 常见物体转动惯量 平行轴定理 转动定律 牛顿第二定律的推广 M J*α 例题 刚体的角动量守恒 刚体的动能定理 刚体与质点的对比

【LeetCode 122】买卖股票的最佳时机

1. 题目 2. 分析 合理地改造原数据&#xff0c;这样会使得代码逻辑大大简化。 为了让代码走相同的逻辑&#xff0c;这里需要在原数据后面追加一个price 0。这个price 0大大地简化了处理[1,2,3,4,5] 这类型数据的复杂度。 3. 代码 class Solution:def maxProfit(self, pri…

倍增法找lca——最近公共祖先

对于结点x和y&#xff0c;需要找他们的最近公共祖先 一个最简单的办法就是沿着x和y的父节点一个一个往上找 这样的时间复杂度是o(n)&#xff0c;对于较大的数据量会TLE 今天要使用的方法是利用倍增来加速这个找lca的过程 倍增算法&#xff1a; 按2的倍数来往上找&#xff0…