如何做到修改 url 参数页面不刷新

HTML5 引入了 history.pushState() 和 history.replaceState() 方法,它们分别可以添加和修改历史记录条目。

let stateObj = {foo: "bar"
};history.pushState(stateObj, "page 2", "bar.html");

假设当前页面为 foo.html ,执行上述代码后会变为 bar.html ,点击浏览器后退,会变为 foo.html ,但浏览器并不会刷新。 pushState() 需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个 URL.让我们来解释下这三个参数详细内容:

  • 状态对象 — 状态对象 state 是一个 JavaScript 对象,通过 pushState () 创建新的历史记录条目。无论什么时候用户导航到新的状态, popstate 事件就会被触发,且该事件的 state 属性包含该历史记录条目状态对象的副本。

    状态对象可以是能被序列化的任何东西。原因在于 Firefox 将状态对象保存在用户的磁盘上,以便在用户重启浏览器时使用,我们规定了状态对象在序列化表示后有 640k 的大小限制。如果你给 pushState() 方法传了一个序列化后大于 640k 的状态对象,该方法会抛出异常。如果你需要更大的空间,建议使用 sessionStorage 以及 localStorage .

  • 标题 — Firefox 目前忽略这个参数,但未来可能会用到。传递一个空字符串在这里是安全的,而在将来这是不安全的。二选一的话,你可以为跳转的 state 传递一个短标题。

  • URL — 该参数定义了新的历史 URL 记录。注意,调用 pushState() 后浏览器并不会立即加载这个 URL,但可能会在稍后某些情况下加载这个 URL,比如在用户重新打开浏览器时。新 URL 不必须为绝对路径。如果新 URL 是相对路径,那么它将被作为相对于当前 URL 处理。新 URL 必须与当前 URL 同源,否则 pushState() 会抛出一个异常。该参数是可选的,缺省为当前 URL。

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

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

相关文章

安徽京准-NTP网络授时服务器助力助力甘南州公共资源交易

安徽京准-NTP网络授时服务器助力助力甘南州公共资源交易 安徽京准-NTP网络授时服务器助力助力甘南州公共资源交易 2024年5月中旬,我安徽京准科技生产研发的NTP时钟服务器成功投运甘南州公共资源交易中心,为该中心的计算机网络系统及其他各业务子系统提供…

串口屏介绍

一、串口屏简介 串口屏(Serial LCD/Serial TFT Display)是一种集成了串行通讯功能的显示屏,广泛应用于各种嵌入式系统、工业控制、人机界面(HMI)等领域。该显示屏通过串口(如UART、RS232、RS485等&#xf…

研究认为要解决社会偏见 就必须关注语言的文化传播

发表在《社会心理学与人格科学》(Social Psychological and Personality Science)杂志上的一项新研究中,研究人员分享了人们的态度与语言和文化深深交织在一起的证据。 研究人员发现,全球民众的态度与语言相关,揭示了…

【面试干货】Java集合类详解:List、Set、Queue、Map、Stack的特点与用法

【面试干货】Java集合类详解:List、Set、Queue、Map、Stack的特点与用法 1、Map1.1 特点1.2 用法1.3 常见的实现类 2、Set2.1 特点2.2 用法2.3 常见的实现类 3、List3.1 特点3.2 用法3.3 常见的实现类 4、Queue4.1 特点4.2 用法4.3 常见的实现类 5、Stack5.1 特点5.…

网络安全的未来趋势:预测与准备

# 网络安全的未来趋势:预测与准备 随着技术的飞速发展,网络安全领域正面临着前所未有的挑战和变革。预测未来网络安全的趋势并做好相应的准备,对于保护数字资产和个人隐私至关重要。本文将探讨网络安全的未来趋势以及组织和个人应如何准备应…

FastWeb - Lua开源跨平台网站开发服务

在网站开发领域,大家都熟知PHPStudy和宝塔这两款广受欢迎的工具,但今天我要介绍的是一款功能强大、支持跨平台的开源Lua网站开发服务——Fast Web,以及与之配套的网站管理器。 Fast Web简介 Fast Web是一款基于Lua编写的网站开发框架&#…

注解 - @ResponseStatus

注解简介 在今天的每日一注解中,我们将探讨ResponseStatus注解。ResponseStatus是Spring框架中的一个注解,用于为控制器方法指定HTTP响应状态码和理由短语。 注解定义 ResponseStatus注解用于标记控制器方法或异常类,以指示HTTP响应的状态码…

基于Flask+Mysql+EasyUI的简单用户管理系统

1、系统实现功能 添加用户查看用户修改用户删除用户 完整代码下载地址在最后,若显示链接不存在,可能是资源还没有审核,可私聊我发完整代码。 2、功能实现 2.1 添加用户 构建添加用户的Flask接口add_user() app.route("/add/user&quo…

依赖自动装配

黑马程序员SSM框架 文章目录 1、依赖自动装配2、依赖自动装配的特征 1、依赖自动装配 IoC容器根据bean所依赖的资源在容器中自动查找并注入到bean中的过程称为自动装配自动装配方式 按类型(常用)按名称按构造方法不启用自动装配 配置中使用bean标签auto…

React小记(三)_函数组件的使用

1、创建项目 npx create-react-app myReact2、启动项目 cd myReactnpm start3、jsx语法 1、只能有一个根标签/<></>2、所有标签必须闭合3、jsx语法要写在小括号()里面 !!!4、插值 { } 1、插值可以使用的位置标签内容标签属性2、{ }里面为js语句【代码】 function A…

使用 MPLS 解决 BGP 的路由黑洞

MPLS 协议并不会为通过 BGP 协议学习的路由条目分配标签号&#xff1b; 而是在访问这些 BGP 路由目标网段时&#xff0c;在流量中压入到达这些网段的 BGP 下一跳设备地址的标签号&#xff1b; 例&#xff1a;R2从BGP邻居5.5.5.5学习到6.6.6.0 网段的路由&#xff1b;R2在访问…

网络编程入门介绍:TCP 和 UDP

目录 简介TCP&#xff1a;传输控制协议 TCP 的特点TCP 如何工作TCP 示例TCP 实践样例 UDP&#xff1a;用户数据报协议 UDP 的特点UDP 如何工作UDP 示例UDP 实践样例 TCP 与 UDP 的比较总结 简介 在计算机网络中&#xff0c;TCP&#xff08;传输控制协议&#xff09;和 UDP&a…

2024年6月15日 十二生肖 今日运势

小运播报&#xff1a;2024年6月15日&#xff0c;星期六&#xff0c;农历五月初十 &#xff08;甲辰年庚午月庚戌日&#xff09;&#xff0c;法定节假日。 红榜生肖&#xff1a;兔、马、虎 需要注意&#xff1a;牛、鸡、龙 喜神方位&#xff1a;西北方 财神方位&#xff1a;…

【数学】如何求解矩阵的特征值和特征向量

文章目录 如何求解矩阵的特征向量背景公式示例题目详细讲解Python代码求解实际生活中的例子本质解释 如何求解矩阵的特征向量 背景 特征向量和特征值是线性代数中的重要概念&#xff0c;广泛应用于物理学、计算机科学&#xff08;如机器学习、图像处理&#xff09;和统计学等…

摄像头校准之白平衡畸变坏点

摄像头校准之白平衡&畸变&坏点 1. 源由2. 校准内容3. 畸变校准一、畸变模型二、校准步骤1. 准备工作2. 特征点检测3. 计算内参数和畸变系数4. 畸变校正 三、验证和优化1. 视觉验证2. 误差评估3. 参数优化 4. 白平衡校准一、白平衡基础二、自动白平衡&#xff08;AWB&am…

AI 客服定制:LangChain集成订单能力

为了提高AI客服的问题解决能力&#xff0c;我们引入了LangChain自定义能力&#xff0c;并集成了订单能力。这使得AI客服可以根据用户提出的问题&#xff0c;自动调用订单接口&#xff0c;获取订单信息&#xff0c;并结合文本知识库内容进行回答。这种能力的应用&#xff0c;使得…

使用powershell筛选AD域控不能自主更改的用户并变更

# 查询“用户不能更改密码”为勾选状态的所有域用户&#xff0c;将域账户、姓名、勾选状态作为结果保存到C:\result\result.csvGet-ADUser -Filter * -Properties CannotChangePassword | Where-Object { $_.CannotChangePassword -eq $true } | Select SamAccountName, Name, …

班子考核评价的重要性与实施方法

在组织管理领域&#xff0c;班子考核评价是一项至关重要的工作&#xff0c;它不仅关系到组织的发展方向和速度&#xff0c;更直接影响到组织的凝聚力和战斗力。一个科学、公正、有效的班子考核评价体系&#xff0c;能够准确反映班子的工作成效&#xff0c;激励班子成员积极作为…

QML学习及实战

QML学习及实战&#xff08;更多内容&#xff09; 创建项目 3. 剩下的就是一路下一步即可 添加静态资源——图片 添加之后完成之后的路径 案列 || demo 可以参考的资料&#xff1a;https://github.com/gongjianbo/MyTestCode/blob/master/README.md 1. 文本省略号 Text {wi…

第二十三节:带你梳理Vue2:Vue插槽的认识和基本使用

前言: 通过上一节的学习,我们知道了如何将数据从父组件中传递到子组件中, 除了除了将数据作为props传入到组件中,Vue还允许传入HTML, Vue 实现了一套内容分发的 API&#xff0c;这套 API 的设计灵感源自 Web Components 规范草案&#xff0c;将 <slot> 元素作为承载分发…