news 2026/6/9 21:17:49

删除 地址栏 地址里的 某个的参数 无感刷新页面

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
删除 地址栏 地址里的 某个的参数 无感刷新页面
consturl=newURL(window.location.href);url.searchParams.delete('abc');window.history.replaceState(null,'',url.toString());意思就是 删除 地址栏 地址里的 abc的参数 www.666.com?abc=123删完之后 就是 www.666.com

这段代码的作用就是在不刷新页面的前提下,从浏览器地址栏中删除 URL 的某个查询参数(这里是abc


逐行解释:

consturl=newURL(window.location.href);
  • 创建一个URL对象,解析当前页面的完整 URL(比如https://www.666.com?abc=123&def=456)。
url.searchParams.delete('abc');
  • 调用URLSearchParams.delete('abc')方法,移除查询字符串中名为abc的参数
  • 无论abc有没有值(如?abc?abc=123),都会被彻底删除。
  • 其他参数(如def=456)不受影响。
window.history.replaceState(null,'',url.toString());
  • 使用history.replaceState()替换当前历史记录条目,将 URL 更新为删除abc后的新地址;
  • null表示不存储额外状态数据;
  • 第二个参数是标题(现代浏览器基本忽略);
  • 第三个参数是新的 URL(不含abc);
  • 关键:这不会触发页面跳转或刷新!

举个例子:

原始 URL:

https://www.666.com?abc=123&xyz=789

执行代码后,地址栏变成:

https://www.666.com?xyz=789

如果原始 URL 是:

https://www.666.com?abc=123

执行后就变成:

https://www.666.com

✅ 完全符合你的描述。


补充说明

  • 这种方式常用于:用户完成某个操作后(比如关闭弹窗、清除筛选条件),清理 URL 中的临时参数,保持地址干净。
  • 相比window.location.href = ...,它不会重新加载页面,用户体验更流畅。
  • 如果你希望保留历史记录(点返回能回到带参数的状态),可以用pushState而不是replaceState

封装成函数(推荐复用)

functionremoveUrlParam(paramName){consturl=newURL(window.location.href);url.searchParams.delete(paramName);window.history.replaceState(null,'',url.toString());}// 使用removeUrlParam('abc');

这样你就可以轻松删除任意参数了 ✅

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/28 14:10:20

计算机毕设java飞机票管理系统 基于Java的航空票务管理平台设计与实现 Java技术驱动的航班票务管理系统开发

计算机毕设java飞机票管理系统7h5v09 (配套有源码 程序 mysql数据库 论文) 本套源码可以在文本联xi,先看具体系统功能演示视频领取,可分享源码参考。随着互联网的普及和航空出行的日益频繁,传统的飞机票管理模式已难以满足现代用户…

作者头像 李华
网站建设 2026/5/28 20:07:34

HY-MT1.5-1.8B自动化部署:CI/CD流水线集成实战

HY-MT1.5-1.8B自动化部署:CI/CD流水线集成实战 1. 为什么需要为HY-MT1.8B构建CI/CD流水线? 你有没有遇到过这样的情况:模型在本地跑得好好的,一上测试环境就报CUDA内存不足;开发同学改了提示词模板,测试同…

作者头像 李华
网站建设 2026/6/5 11:25:53

2026必备!自考论文神器TOP10:AI论文工具深度测评与推荐

2026必备!自考论文神器TOP10:AI论文工具深度测评与推荐 2026年自考论文写作新趋势与工具测评方向 随着人工智能技术的不断进步,越来越多的自考学生开始依赖AI论文工具来提升写作效率与质量。然而,面对市场上琳琅满目的选择&…

作者头像 李华
网站建设 2026/5/30 9:10:34

吐血推荐研究生必用TOP9 AI论文网站

吐血推荐研究生必用TOP9 AI论文网站 2026年研究生必备AI论文工具深度测评 随着人工智能技术在学术领域的广泛应用,越来越多的研究生开始依赖AI工具提升论文写作效率与质量。然而,面对市场上五花八门的AI论文网站,如何选择真正适合自己研究方向…

作者头像 李华
网站建设 2026/6/2 2:51:11

2.14 Docker镜像仓库管理:Harbor私有仓库搭建与镜像推送实战

2.14 Docker镜像仓库管理:Harbor私有仓库搭建与镜像推送实战 引言 镜像仓库是容器化应用的重要组成部分。Harbor是VMware开源的企业级Docker镜像仓库,提供安全、高可用的镜像管理能力。本文将详细介绍Harbor的安装、配置和使用方法。 一、镜像仓库概述 1.1 仓库类型 公共…

作者头像 李华
网站建设 2026/6/8 11:41:52

3.1 Kubernetes架构深度解析:Master和Node节点核心组件详解 (2)

3.1 Kubernetes架构深度解析:Master和Node节点核心组件详解 引言 Kubernetes是容器编排的事实标准,理解其架构是掌握Kubernetes的关键。本文将深入解析Kubernetes的Master和Node节点架构,以及各个核心组件的功能和工作原理。 一、Kubernetes架构概述 1.1 整体架构 ┌─…

作者头像 李华