在JavaScript中获取当前页面路径的方法

        在Web开发中,我们经常需要获取当前页面的URL路径,以便进行导航、数据加载或其他与页面相关的操作。JavaScript提供了几种方法来帮助我们实现这一功能。在本文中,我们将探讨几种常用的方法。

方法一:使用 window.location 对象

  window.location 对象包含了关于当前URL的详细信息。你可以通过访问其属性来获取URL的不同部分。

// 获取完整的URL  
var fullUrl = window.location.href;  
console.log(fullUrl); // 输出完整的URL,例如:https://example.com/page/index.html?param=value#section  // 获取路径部分(不包括域名和查询字符串)  
var pathname = window.location.pathname;  
console.log(pathname); // 输出路径部分,例如:/page/index.html  // 获取查询字符串部分(包括问号)  
var search = window.location.search;  
console.log(search); // 输出查询字符串部分,例如:?param=value  // 获取哈希部分(包括井号)  
var hash = window.location.hash;  
console.log(hash); // 输出哈希部分,例如:#section

方法二:使用 document.URL

   document.URL 属性也是一个简单的选择,它直接返回完整的URL。

var fullUrl = document.URL;  
console.log(fullUrl); // 输出完整的URL,与window.location.href相同

方法三:使用 new URL() 构造函数

        在现代浏览器中,URL 构造函数提供了更强大的URL解析和操作能力。通过它,你可以更细致地获取URL的各个部分,并对其进行修改。

var urlObject = new URL(window.location.href);  // 获取协议(例如:"https:")  
var protocol = urlObject.protocol;  
console.log(protocol); // 输出协议,例如:https:  // 获取主机名(例如:"www.example.com")  
var hostname = urlObject.hostname;  
console.log(hostname); // 输出主机名  // 获取端口号(如果有的话)  
var port = urlObject.port;  
console.log(port); // 输出端口号,默认为空字符串(如果使用的是默认端口)  // 获取路径名(与window.location.pathname相同)  
var pathname = urlObject.pathname;  
console.log(pathname); // 输出路径名  // 获取搜索参数(作为URLSearchParams对象)  
var searchParams = urlObject.searchParams;  
console.log(searchParams.get('param')); // 输出查询字符串中名为'param'的参数值  // 获取哈希(与window.location.hash相同,但不包括井号)  
var hashWithoutPound = urlObject.hash.slice(1); // 移除井号  
console.log(hashWithoutPound); // 输出哈希部分,例如:section

总结

        以上就是在JavaScript中获取当前页面路径的几种常用方法。每种方法都有其独特的用途和优点,你可以根据具体需求选择适合你的方法。无论你选择哪种方法,都能轻松地获取到当前页面的路径并进行相应的操作。

        在大多数情况下,使用 window.location 或 document.URL 就足够了,但如果你需要更复杂的URL处理或修改,那么 URL 构造函数将是一个更好的选择。

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

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

相关文章

百度云内容审核快速配置 (java)

为什么要选择百度云 ? 因为他免费用一年 首先要先开通百度云内容安全服务 按照操作指引走完整套 ContentCensor Java SDK目录结构** com.baidu.aip├── auth //签名相关类├── http //Http通…

IDEA 好用的插件

图标插件:Atom Material Icons 此插件的作用就是更好的显示各种文件的类别,使之一目了然 汉化包 Chinese ​(Simplified)​ Language Pack / 中文语言包 作用就是 汉化 AI编码助手 GitHub Copilot AI编码助手:提示代码很好用 缺点&#xff1a…

vue3在router中使用pinia报错解决

问题 在router中使用pinia(getActivePinia was called with no active Pinia. Did you forget to install pinia)报错解决 解决 store/index.ts import { createPinia } from piniaconst pinia createPinia() export default piniamain.ts&#xff…

使用perf查看热点函数和系统调用最大延迟函数

1、安装perf工具 1.1、ubuntu 18.04 x86下的安装 安装sudo apt install linux-source sudo apt install linux-tools-uname -r # ubuntu 18.04虚拟机实操可行 1.2、ubuntu 18.04 ARM下的安装 参考 Nvidia Jetson系列产品安装Perf ​ARM64版本的Ubuntu上安装perf 与参考文…

windows11获取笔记本电脑电池健康报告

笔记本电脑的电池关系到我们外出时使用的安全,如果电池健康有问题需要及时更换,windows系统提供了检查电池健康度的方法。 1、打开命令行 1)键入 winR 2)键入 cmd 打开命令行。 2、在命令行运行如下指令,生成电池健…

DI-engine强化学习入门(九)环境包裹器(Env Wrapper)

在强化学习中,环境(Environment)是智能体(Agent)进行学习和互动的场所,它定义了状态空间、动作空间以及奖励机制。Env Wrapper(环境包装器)提供了一种方便的机制来增强或修改原始环境…

qt lnk2019 其中一种情况(obj未生成)

目录结果 dir1: test1.pri test1.h main.cpp test1.h中内容: class Test{ public:void test(); }; main.cpp中引用: Test test; test.test(); 编译时一直报lnk2019 找不到test函数,找不到Test的构造析构方法; 最终经过排查发…

很好的Baidu Comate,使我的编码效率飞起!

文章目录 背景及简单介绍Baidu Comate安装功能演示总结 🎁写在前面: 观众老爷们好呀,这里是前端小刘不怕牛牛频道,今天牛牛在论坛发现了一款便捷实用的智能编程助手,就是百度推出的Baidu Comate。下面是Baidu Comate评…

P2001装箱问题

题目描述: 有一个箱子容量为 𝑉V,同时有 𝑛n 个物品,每个物品有一个体积。 现在从 𝑛n 个物品中,任取若干个装入箱内(也可以不取),使箱子的剩余空间最小。输出这个最小…

MT3034 算术招亲

跟MT3033新的表达式类似&#xff0c;只多了一个括号合法性的判断 #include <bits/stdc.h> using namespace std; const int N 40; bool tag[N]; bool is_op(char c) {return c || c - || c * || c / || c ^; } int priority(char op) { // 优先级排序if (op ||…

pip opencv-python其一失败原因解决方案

pip opencv-python其一失败原因解决方案 错误原因&#xff1a; ----------------------------------------ERROR: Failed building wheel for opencv-pythonFailed to build opencv-pythonERROR: Could not build wheels for opencv-python which use PEP 517 and cannot be in…

QT 设置窗口不透明度

在窗口作为子窗口时&#xff0c;setWindowOpacity设置窗口的不透明度可能会失效。 QGraphicsOpacityEffect *opacityEffect new QGraphicsOpacityEffect(this); opacityEffect->setOpacity(1.0); this->setGraphicsEffect(opacityEffect);// 创建属性动画对象&#xff…

vector、heap数组、stack数组访问性能验证

测试目的 本次测试旨在比较不同数据结构&#xff08;vector、数组&#xff09;以及不同访问方法&#xff08;[]、at()、offset&#xff09;在性能上的差异&#xff0c;从而为开发者提供在特定情境下做出最佳选择的依据。 测试代码 测试网址:Quick C Benchmarks 使用GCC9.5 …

微服务项目实战-黑马头条(十三):持续集成

文章目录 项目部署_持续集成1 今日内容介绍1.1 什么是持续集成1.2 持续集成的好处1.3 今日内容 2 软件开发模式2.1 软件开发生命周期2.2 软件开发瀑布模型2.3 软件的敏捷开发 3 Jenkins安装配置3.1 Jenkins介绍3.2 Jenkins环境搭建3.2.1 Jenkins安装配置3.2.2 Jenkins插件安装3…

中仕公考:非应届生能考军队文职吗?

军队文职考试的招生对象主要针对普通高等学校的毕业生以及社会人才&#xff0c;报考条件中并没有限制考生必须是应届毕业生。所以&#xff0c;往届毕业生也是具备报考资格的&#xff0c;只需其满足相关的申请条件即可。 报考人员可大致分为三类&#xff1a;普通高校毕业生、社…

Linux中云盘/磁盘,爆满处理方式

1&#xff1a;du和df命令查看磁盘大小不一致 以下是阿里云服务器云盘使用率 运行 du -sh / 大小为20g 我的服务器大小为40g 按道理说这个云盘使用率应该是百分之五十 而运行 df -h / 这个命令是跟这个云盘使用率差不多的。 1.1分析原因 我安装了mysql&#xff0c;nginx…

微信投票小程序源码系统 独家支持礼物投票 道具投票盈利能力超强 带完整的安装代码包以及搭建教程

微信小程序的快速发展&#xff0c;各类应用场景层出不穷&#xff0c;其中投票小程序因其广泛的适用性和互动性&#xff0c;成为了许多企业和个人推广、活动的首选工具。小编给大家分享一款微信投票小程序源码系统&#xff0c;该系统以其独特的礼物投票和道具投票功能&#xff0…

公众号流量主的收益怎么样?

公众号之前是一个私域平台&#xff0c;没有粉丝基本是没有推荐的&#xff0c;所以之前入门的门槛还是很高的&#xff0c;但是今年公众号和视频号改变了推流的机制&#xff0c;现在发的文章会进入到流量池中&#xff0c;进入到公域流量&#xff0c;所以发布的优质文章会大爆的&a…

UDS 诊断问题 1 禁止肯定响应位是?

https://zhidao.baidu.com/question/309042832640046964.html 禁止肯定响应位是什么 在车里CAN诊断中&#xff0c;如果哪个诊断子功能支持禁止肯定响应位&#xff0c;并且为1&#xff0c;如10 03 此时向该ECU发送请求10 83&#xff0c;那么ECU不会回复任何报文&#xff0c;也就…

大模型驱动的新一代 BI 平台,Sugar BI 开启智慧决策新模式

本文整理自 2024 年 4 月 16 日的 2024 百度 Create 大会上的《大模型驱动的新一代 BI 平台如何开启智慧决策》分享。 全文包括了可视化 BI 分析技术架构、智能图表推荐策略与规则设计、Sugar Bot 智能问数的技术实现流程&#xff0c;以及目前的场景应用等。 1 Sugar BI 产…