无刷新跳转—关于history中pushState和replaceState方法详解

最新推荐文章于 2024-08-02 13:35:44 发布
最新推荐文章于 2024-08-02 13:35:44 发布
阅读量3.5k 收藏 7
点赞数 3
分类专栏： 前端 html 文章标签： sass 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bejpse/article/details/123220755
版权
前端 同时被 2 个专栏收录
90 篇文章 12 订阅
订阅专栏
html
90 篇文章 0 订阅
订阅专栏

〝 古人学问遗无力，少壮功夫老始成 〞

**关于history中pushState和replaceState方法详解，**常码字不易，出精品更难，没有特别幸运，那么请先特别努力，别因为懒惰而失败，还矫情地将原因归于自己倒霉。你必须特别努力，才能显得毫不费力。如果这篇文章能给你带来一点帮助，希望给飞兔小哥哥一键三连，表示支持，谢谢各位小伙伴们。

目录

一、方法作用

二、参数详解

三、两者相同点

四、两者不同点

一、方法作用

  • HTML5新接口，可以改变网址而不刷新页面
  • 存在跨域问题，不支持重写到另一个域名下
  • 仅改变网址，网页不会真的跳转，也不会获取到新的内容，本质上网页还停留在原页面

二、参数详解

  • window.history.pushState( data, title, url )
  • data 状态对象：传给目标路由的信息，可为空
  • title页面标题：目前所有浏览器都不支持,填空字符串即可
  • url可选url：目标url，不会检查url是否存在，且不能跨域。如不传该项,即给当前url添加data

  • window.history.replaceState( data, title, url )
  • data 状态对象：传给目标路由的信息，可为空
  • title页面标题：目前所有浏览器都不支持,填空字符串即可
  • url可选url：目标url，不会检查url是否存在，且不能跨域。如不传该项,即给当前url添加data
  • 类似于pushState，但是会直接替换掉当前url，而不会在history中留下记录

三、两者相同点

  • 都可以无刷新修改url
  • 都不支持跨域，也就是不支持修改成其他域名的记录
  • 比如我在百度域名下，想将c站的域名放进历史记录

四、两者不同点

  • 是否会留下记录，这句话的意思就是说改了url后，是否可以通过back回撤
  • pushState因为留下记录，所以可以回撤
  • replaceState因为未留下记录，所以无法返回

Bejpse
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
History.pushState 阻止页面浏览器后退功能、window.performance.navigation.type 判断页面刷新方式
Xpy 的博客
12-09 3222
需要阻止浏览器的后退按钮，移动端的后退手势。 window.history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { window.history.pushState(null, null, document.URL); });
h5之新增的historyAPI介绍
honeydragon's博客
07-11 924
功能介绍history的HTML5 API可以更改当前页面的url但是不刷新页面，同时将路径记录到历史页面中，可通过浏览器后退按钮来返回到上一状态。这样可以轻松帮我们实现在ajax动态局部刷新页面后，通过后退按钮来回来前一状态，而保证页面不跳转。APIstateObj——一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。title——新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。url：新的网址，必须与当前页面处在
使用history.pushState管理浏览历史
微赚淘客开发者博客
06-28 745
是HTML5中引入的一个方法，用于在浏览器历史记录中添加新的状态。它允许我们改变当前页面的URL和浏览历史条目而不刷新页面，从而实现单页应用（SPA）中的页面切换和前进后退功能。大家好，我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编，也是冬天不穿秋裤，天冷也要风度的程序猿！方法需要传入三个参数：一个状态对象（state object）、页面标题（title）和可选的URL。以下是一个简单的示例，演示如何在一个基本的HTML页面中使用。// 模拟更新页面内容的函数。方法来管理浏览历史。
Javascript history对象的 history.pushState() 和 history.replaceState() 方法
热门推荐
cvper's world !
03-08 1万+
history.pushState() 和 history.replaceState() 是history对象的两个新增的方法，是可以很好的操作历史记录的方法；history.State()history.State()的作用是向浏览器的历史添加一条记录，我们来看看如何使用这个方法：我们创建一个html网页文件，在网页中加入一个button按钮即可，我们看看显示效果我们看到在地址栏中显示了文件的地...
vue2老项目中node-sass更换dart-sass
csl125的博客
07-25 492
安装dart-sas sass-loader 推荐安装sass@1.26.2 sass-loader@7.3.1。更换原因：node-sass经常会出现node版本问题，就很麻烦。卸载项目中的node-sass sass-loader。如果使用了stylelint，需要修改配置规则。然后需要全局替换一下/deep/，全局搜索。从新配置vue.config.js。
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1418
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
高德地图离线版 使用高德地图api的方法
最新发布
m0_62336925的博客
08-02 327
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 897
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
前端面试：项目细节重难点问题分享（十四）
weixin_49062485的博客
08-02 387
更多详情：爱米的前端小笔记（csdn~xitujuejin~zhiHu~Baidu~小红shu）同步更新，等你来看！都是利用下班时间整理的，整理不易，大家多多👍💛➕🤔哦！你们的支持才是我不断更新的动力！
electron 主进程和渲染进程
qq_21087199的博客
07-29 388
虽然最近一年前端大环境不好，但是大家还是要加油鸭！，努力总不会错，千军万马过独木桥，希望大家都是闯过去那一个。进入正题。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 2398
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
前端代码混淆加密（使用Terser、WebpackObfuscator）
@Fonden
07-30 369
（注意Terser和WebpackObfuscator引入的方式不同，后者是放到plugins中）② 在 Terser 之后使用 WebpackObfuscator 进行混淆。以此在网上查找到相应工具有：Terser、WebpackObfuscator。① 使用 Terser 进行代码压缩和 source map 生成，② 设置在生产环境中才去使用混淆加密工具（开发环境会产生各种报错）为了对公司项目进行安全防护措施，前端需要进行代码混淆加密处理。压缩代码、变量和函数名混淆、删除未使用代码。
【前端面试3+1】20 css三栏布局6种实现方式、多行文本溢出怎么实现、token过期了怎么处理、【二叉树的中序遍历】
qq_61798306的博客
07-30 732
本文包含八股文：css三栏布局6种实现方式、多行文本溢出怎么实现、token过期了怎么处理，算法【二叉树的中序遍历】
前端必修技能：高手进阶核心知识分享 - css盒的before、after和子元素的层叠关系解析及应用
uu0216的博客
07-29 1275
一个盒子 它的 ::before伪类在最底层, ::after 伪元素在最上层, 其所有子元素在中间叠放。 盒子的 子元素堆叠关系，按照书写顺序自下而上排序：先写的叠放在下面，后写的在上面。 父元素在最下面。
前端开发技术之HTML/CSS
m0_67484548的博客
07-29 794
5. <figure> 和 <figcaption>：<figure> 用于媒体内容的分组，<figcaption> 用于定义 <figure>1. <menu> 和 <menuitem>：定义菜单列表（<menu>）和菜单项（<menuitem>）（HTML5。1. <h1> to <h6>：定义HTML标题，<h1> 表示最高的标题级别，<h6> 表示最低的标题级别。3. <figure> 和 <figcaption>：定义媒体内容的分组，以及媒体的标题或说明。
CSP：内容安全策略的前端深入解析
wujiayu31415的博客
07-29 481
通过合理配置CSP策略，并利用报告模式进行测试和优化，可以显著提升Web应用的安全性，防范跨站脚本攻击等安全威胁。浏览器在加载和执行资源时，会根据这些指令进行严格的验证，只有符合规则的资源才会被加载和执行。在某些情况下，Web应用可能需要加载来自不同来源的内容，如iframe、嵌入的脚本或样式表等。：在报告模式下，CSP可以记录违反策略的行为，帮助开发者发现并修复潜在的安全问题，而不影响用户的正常访问。用于控制嵌入内容的来源等。：通过实施CSP，网站可以向用户展示其对安全性的重视，增强用户对网站的信任度。
中国象棋 纯网页前端 演示与下载
qq_30049249的博客
08-01 381
https://andi.cn/app/chess/
实用网站推荐
Hinton_的博客
07-28 522
主要为与学习生活有关的网站，基本都是免费
微前端概念
qq_40121308的博客
07-29 962
元素隔离的概念来自ShadowDom,即ShadowDom中的元素可以和外包的元素重复但不会冲突，micro-app模拟实现了类似ShadowDom的功能，元素不会逃离
HTML5 history新特性pushState、replaceState
05-18
`pushState()` 和 `replaceState()` 是 HTML5 history API 中的两个新方法，它们可以在不刷新页面的情况下修改浏览器的历史记录。 `pushState()` 方法可以向浏览器的历史记录中添加一条新的记录，并且不会立即跳转到新的页面。该方法接受三个参数，分别是状态对象(state object)、标题(title)和 URL(url)。例如： ``` history.pushState({page: 1}, "Page 1", "/page1"); ``` 这里的第一个参数是一个 JavaScript 对象，它可以包含一些需要保存在历史记录中的状态信息。第二个参数是页面的标题，第三个参数是页面的 URL。 `replaceState()` 方法和 `pushState()` 方法类似，但它是用新的历史记录替换当前的历史记录，而不是添加一条新的记录。例如： ``` history.replaceState({page: 2}, "Page 2", "/page2"); ``` 这里的参数和 `pushState()` 方法相同。 通过使用 `pushState()` 和 `replaceState()` 方法，我们可以创建一个单页应用程序(SPA)，在不刷新页面的情况下改变 URL 和页面内容。这种技术可以提高用户体验，但需要注意的是，如果不正确使用这些方法，可能会造成一些问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值