首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

pushState、replaceState、onpopstate 实现Ajax页面前进后退刷新

但也存在这一些问题: 再刷新页面页面就会变成初始的状态 浏览器的前进后退功能无效 对搜索引擎的爬虫抓取不友好  1、 早前会使用浏览器的 hash锚点 来解决 不同的hash标记着页面不同的部分...,能修正页面刷新数据不正确的问题 再通过 onhashchange 事件监听hash锚点的变化,手动进行前进后退操作,浏览器支持度 Chrome FireFox IE Opera Safari 5.0...这个栗子目的是:初始值为0,通过异步请求自增值,可以前进后退以及刷新,新打开一个url后也能获取相应的数据 history.pushState(state, title, url) history.replaceState....click(function() { increaseVal(parseInt($val.text(), 10)); }); // 浏览器的前进后退...val=num 的方式,标记了不同的ajax结果页 Tips: 使用pushState之后,当前进后退触发了popstate事件,获取到相应的json对象 json对象的数据可自定义 可简单地存储相关标记再发个请求

2.3K10

如何用栈实现浏览器的前进后退

这里先介绍一下栈的定义实现,并介绍它的一些常用的应用,最后再简单实现一个简单的浏览器前进后退的操作。 栈是一种“操作受限”的线性表,只允许在一端插入删除数据,特点就是后进先出、先进后出。...目录: 栈的实现 栈在函数调用中的应用 栈在表达式求值中的应用 栈在括号匹配中的应用 利用栈实现浏览器的前进后退功能 栈的实现 栈既可以通过数组实现,也可以通过链表实现。...利用栈实现浏览器的前进后退功能 最后一个应用是实现浏览器的前进后退功能,这里采用两个栈来解决。...我们使用两个栈,X Y,我们把首次浏览的页面依次压入栈 X,当点击后退按钮时,再依次从栈 X 中出栈,并将出栈的数据依次放入栈 Y。...当我们点击前进按钮时,我们依次从栈 Y 中取出数据,放入栈 X 中。当栈 X 中没有数据时,那就说明没有页面可以继续后退浏览了。当栈 Y 中没有数据,那就说明没有页面可以点击前进按钮浏览了。

88330

ajax无刷新页面切换,历史记录后退前进解决方案

问题描述 我们在工作中常常遇到需要用ajax来显示下一页上一页,ajax可以不刷新页面进行操作!但是,假如你想通过浏览器的历史记录返回上一页下一页。那么ajax默认是做不到的!...但是呢,假如一个页面中,只有一个地方是需要动态的上一页下一页,其他地方都是固定的,那么这种情况除了使用模板之外,我们使用ajax来操作显得格外方便!那么如何解决ajax历史记录的返回前进呢?...js中history相关API普及 首先我们来看看history相关的API。 history.state 当前URL下对应的状态信息。...window.onpopstate history.gohistory.back(包括用户按浏览器历史前进后退按钮)触发,并且页面无刷的时候(由于使用pushState修改了history)会触发popstate...而当有浏览者点击浏览器“后退”或“前进”按钮时,我们用下面的代码来响应用户的操作: window.onpopstate = function(event){ if(event.state){

1.3K30

几种方法实现ajax请求内容时使用浏览器后退前进功能

我们可以利用ajax进行无刷新改变文档内容,但是没办法去修改URL,即无法实现浏览器的前进后退、书签的收藏功能。...当只有hash部分发生变化时,浏览器的历史记录会产生记录,但不会向服务器发出请求,这时按后退键地址栏的uri会变化但页面内容不变。...ie6、7均不支持onhashchange,但可以用setInterval定期检查hash的改变,或者onload中检查的方法 曾今经典场景:Gmail借助iframhash实现前进后退功能...forward():前进到下一页。 go([delta]):delta是个数字,如果不写或为0,则刷新本页;如果为正数,则前进到相应数目的页面;若为负数,则后退到相应数目的页面。...该事件会在调用浏览器的前进后退以及执行history.forward、history.back、history.go触发,因为这些操作有一个共性,即修改了历史堆栈的当前指针。

93420

js判断页面是否是通过浏览器后退按钮返回打开的

这样子就产生了一个问题,点击身份的时候会生成新的token,但是页面是允许返回的所以url地址栏中的历史token还在,所以就会基于这个token触发请求导致接口报了Token验证失败的错误,一番搜索之后终于找到了解决办法...(用户通过常规导航方式访问页面,比如点一个链接,或者一般的get方式) 1 : TYPE_RELOAD Navigation where the history handling behavior is...(用户通过刷新,包括JS调用刷新接口等方式访问页面) 2 : TYPE_BACK_FORWARD Navigation where the history handling behavior is set...(用户通过后退按钮访问本页面) 255 : TYPE_RESERVED Any navigation types not defined by values above....所以我们只要判断type属性为2时就可以知道页面是通过返回按钮打开的了,然后开头的问题就可以据此加判断来解决token异常了。 ?

16.8K20

location的hash部分使用window.onhashchange实现ajax请求内容时使用浏览器后退前进功能

js跨域双向数据传递时可以用iframe加上location.hash来实现,在研究这个的时候深入学习了一下hash的特性。  ...当只有hash部分发生变化时,浏览器的历史记录会产生记录,但不会向服务器发出请求,这时按后退键地址栏的uri会变化但页面内容不变。  ...而hash变化但不发出请求就是js跨域双向数据传递的基础啦。  ...下面就讲述一下hash结合ajax的使用,ajax每次取数据时页面更新后浏览器并不产生历史记录,也就是说后退前进按钮失去应用的效用,这时可以结合hashwindow.onhashchange来使用,.../AjaxHasPool.js"> 9 10 11 var ajax = new AjaxHasPool(); 12

896100

JavaScript禁用浏览器后退按钮

产生一个“前进”的动作,以抵消后退功能,这种方法应该是最简洁的,并且不需要考虑用户连点两次或多次“后退”的情况,缺点是当用户端禁用了JavaScript之后即失效。...这种方法的原理是,用新页面的URL替换当前的历史纪录,这样浏览历史记录中就只有一个页面后退按钮永远不会变为可用。我想这可能正是许多人所寻求的方法,但这种方法仍旧不是任何情况下的最好方法。...3、当键盘敲下后退键(Backspace)后 1、禁止浏览器自动后退 2、但不影响密码、单行文本、多行文本输入框等的回退操作 代码如下: ...//处理键盘事件 禁止后退键(Backspace)密码或单行、多行文本框除外 function banBackSpace(e){ var ev = e || window.event;//获取event...(新窗口浏览器后退按钮为灰色),看起来似乎是个好方法,但缺点也比较明显: 首先,关闭重开的浏览器窗口大小可能不同,用户可以明显看出这一过程,并且在一定程度上影响操作。

1.8K30
领券