history的pushState/replaceState理解

于 2024-10-06 22:19:08 发布
阅读量93 收藏
点赞数 2
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71299382/article/details/142732747
版权

在html5中 推出了history这种新的语法 其中 我们可以利用他来完成不同网页之间的跳转 并且通过不同的api调用可以完成同一个需求

1.pushState

该方法除了可以帮助我们完成不同url之间的跳转以外 还支持网页的前进和后退
原理：你可以将网页的前进和后退操作看待成两个栈此消彼长的过程 其中 一个栈的栈顶元素用于进行页面展示 而另外一个栈则用于暂时存放一些网页元素 当我们进行网页的前进操作时 我们首先会考虑第二个栈是否为空 不为空的话 就将第二个栈的栈顶元素压入第一个栈作为栈顶元素进行展示 反之会将网页元素加入到第一个栈作为栈顶元素 并且展示该栈顶元素 而对于网页的后退操作而言 我们则是将第一个栈中的栈顶元素弹出 并且暂时存放到第二个栈中 以备加入到第一栈作为栈顶元素进行展示

真实的原理不是上述所述 只不过上述过程可以用于模拟网页的前进和后退过程 帮助理解罢了

2.replaceState

该方法同样可以帮助我们完成不同url之间的跳转 但是他和pushState不同的地方在于他不支持网页的前进和后退 因为他不能够像pushState那样准备两个栈以支撑网页的前进和后退操作

axihaihai
关注
HTML5历史状态管理history API-pushState/replaceState与popstate事件
Lemontree_fu的博客
09-03 255
AJAX技术对我们前端产生了巨大影响 可以让我们的页面无刷新操作减少网络请求 但是它也产生了一些问题 不能够使用浏览器的前进与后退 （后退是浏览器非常常用的按钮） 很久很久以前，Gmail借助iframe解决了这个问题 但现在，HTML5提供了超级简单的API pushState与onpopstate ...
window History的pushState和replaceState方法
weixin_48065262的博客
05-10 5442
window history的pushState和replaceState方法使用。
ajax与HTML5 history pushState/replaceState实例
sugang_ximi的专栏
11-12 1042
http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/ 一、本文就是个实例展示 三点： 我就TM想找个例子，知道如何个使用，使用语法什么的滚粗跟搜索引擎搞基自己备忘 精力总是有限的，昨天一冲动，在上海浦东外环之外订了个90米的房子，要
HTML5 API—无刷新更新地址 history.pushState/replaceState方法(例子）
chelen_jak的专栏
02-28 8199
转自：http://www.cnblogs.com/maorongmaomao/archive/2012/02/20/2359341.html 尽管是上面讲到的《JavaScript高级程序设计》(第二版)中提到，BOM中的location.path/query…… (window.location)在通过JavaScript更改以后，浏览器都会通过刷新来到达你更改后的URL(locatio
history的pushState和replaceState
weixin_44679078的博客
06-05 431
pushState和replaceState HTML5新接口，可以改变网址(存在跨域限制)而不刷新页面，这个强大的特性后来用到了单页面应用如：vue-router，react-router-dom中。 注意:仅改变网址,网页不会真的跳转,也不会获取到新的内容,本质上网页还停留在原页面! window.history.pushState(data, title, targetURL); @状态对象：传给目标路由的信息,可为空 @页面标题：目前所有浏览器都不支持,填空字符串即可 @可选url：目标url，不会
HTML5 history pushState/replaceState实例
weixin_30587025的博客
09-20 106
---恢复内容开始--- 在移动端，越来越倾向于页面内跳转，而页面内跳转就需要用到history的管理，html5的history是一种解决方案。 在没有history ap之前，我们经常使用散列值来改变页面内容，特别是那些对页面特别重要的内容。因为没有刷新，所以对于单页面应用，改变其URL是不可能的。此外，当你改变URL的散列值，它对浏览器的历史记录没有任何影响。通过增加locat...
ajax与HTML5 history pushState/replaceState
yilian_develope的博客
10-13 414
一、网站分页的实现方式有哪些 整页刷新借助iframeajax请求...... 二、各实现方式的缺点 整页刷新：造成效率损失（等待时间长），流量消耗大 借助iframe：产生很多页面，浏览器的后退按钮无效，多数小型的移动设备（PDA 手机）无法完全显示框架，多框架的页面会增加服务器的http请求ajax请求：无法前进与后退，如重新请求后台数据，则会造成重复请求并影响体验
Ajax与HTML5 history pushState/replaceState实例
巴黎的妖
09-30 827
一、本文就是个实例展示 三点： 我就TM想找个例子，知道如何个使用，使用语法什么的滚粗跟搜索引擎搞基自己备忘 精力总是有限的，昨天一冲动，在上海浦东外环之外订了个90米的房子，要借钱筹首付、贷款和领证什么的。HTML5 history相关知识点啪啦啪啦讲起来也是一条又臭又长的裹脚布，精气神实在不够用，这里，直接一个实例。 二、ajax载入与浏览器历史的前进与后退
History 对象的pushState()和replaceState()
大雾起了清晨
04-25 4152
window.history属性指向 History 对象，它表示当前窗口的浏览历史。History 对象保存了当前窗口访问过的所有页面网址。下面代码表示当前窗口一共访问过3个网址。由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航。// 后退到前一个网址// 等同于浏览器工具栏的“前进”和“后退”按钮，其实就是对 History 对象进行操作。pushState()方法是在历史记录中增加一条新的记录；
ajax与HTML5 history pushState:replaceState实例1
08-03
HTML5的History API提供了pushState和replaceState两个方法，可以解决这个问题。 一、HTML5 History API HTML5的History API提供了对浏览器历史记录的访问和操作能力。它提供了pushState和replaceState两个方法，...
HTML5 history新特性pushState、replaceState及两者的区别
09-28
`pushState`和`replaceState`是两个核心的方法，它们允许我们在不刷新页面的情况下修改浏览器的URL和历史记录。 1. `history.pushState()`方法： `pushState()`用于向浏览器的历史记录栈中添加一个新的状态（state...
浅谈通过JS拦截 pushState和replaceState事件
10-19
History API提供了两个方法，pushState和replaceState，这两个方法允许开发者在浏览器的历史记录中添加或修改记录。然而，与这些方法相关的事件并没有被浏览器原生支持，这就需要我们通过JavaScript进行拦截处理。 ...
HTML5+CSS+JavaScript剪子石头布游戏
cnds123的专栏
10-03 340
用HTML5+CSS+JavaScript剪子石头布游戏实现剪子石头布游戏，游戏有成绩计数，人、机输赢情况，及平局情况
HTML5--裸体回顾
金灰的博客
09-28 1179
dl dt dd。
HTML5 新元素
最新发布
wjs2024的博客
10-06 283
HTML5是互联网上构建和呈现网页内容的标准。自上一版本HTML4以来，HTML5引入了许多新元素，这些元素旨在更好地满足现代网页设计和功能的需求。本文将详细介绍这些新元素，并探讨它们如何改进网页的结构和功能。
HTML5实现唐朝服饰网站模板源码
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
09-27 1422
HTML5实现唐朝服饰网站模板源码，大作业，毕业设计，唐装网站，服饰网站，网站源码，介绍唐装的由来，分为网站首页，唐装演变，唐装配色，唐装花纹，唐装文化等页面，实现了轮播图、视频、表单、TAB、导航栏、底部栏、列表、图文组合、返回顶部等功能，让你代入唐朝服饰的体验感，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
JavaScript 用HTML5约束验证API做表单验证
白瑕 的博客
09-28 489
表单元素对象上有该方法只返回布尔值以反映验证通过与否.
用HTML5+CSS+JavaScript庆祝国庆
cnds123的专栏
10-05 824
用HTML5+CSS+JavaScript庆祝国庆
reactrouter监听路由变化_监听history.push/replaceState和local/sessionStorage变化
05-26
React Router提供了一种使用`<Route>`组件的方法来监听路由变化。可以使用`componentDidUpdate`方法来检测路由变化，从而执行相应的操作。 以下是一个例子，展示如何在React Router中监听路由变化： ```javascript import React from 'react'; import { Route } from 'react-router-dom'; class App extends React.Component { componentDidUpdate(prevProps) { if (this.props.location !== prevProps.location) { // 路由已经变化 console.log('路由变化'); } } render() { return ( <div> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </div> ); } } ``` 如果想要监听`history.push/replaceState`，可以通过重写这些方法来实现： ```javascript const originalPush = history.push; history.push = function push(pathname, state) { originalPush.call(this, pathname, state); window.dispatchEvent(new Event('pushstate')); }; const originalReplace = history.replace; history.replace = function replace(pathname, state) { originalReplace.call(this, pathname, state); window.dispatchEvent(new Event('replacestate')); }; ``` 然后，可以通过监听`pushstate`和`replacestate`事件来检测状态的变化： ```javascript window.addEventListener('pushstate', function() { console.log('history.pushState 发生了变化'); }); window.addEventListener('replacestate', function() { console.log('history.replaceState 发生了变化'); }); ``` 如果想要监听`local/sessionStorage`的变化，可以使用`window.addEventListener`来监听相应事件： ```javascript window.addEventListener('storage', function(e) { if (e.key === 'mykey') { console.log('localStorage变化为：' + e.newValue); } }); ``` 同样的，可以使用`sessionStorage`来监听`sessionStorage`的变化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

axihaihai

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值