原文:html5新特性:利用history的pushState等方法来解决使用ajax导致页面后退和前进的问题

一 背景 使用ajax,可以实现不需要刷新整个页面就可以进行局部页面的更新。这样可以开发交互性很强的富客户端程序,减少网络传输的内容。但长期以来存在一个问题,就是无法利用浏览器本身提供的前进和后退按钮进行操作。比如在页面执行某个动作,该动作利用ajax请求到服务器获取数据,更新了当前页面的某些内容,这时想回到操作前的界面,用户就会习惯点击浏览器的后退按钮,实际这里是无效的 要么页面没反应,要么打开 ...

2016-01-20 15:54 1 16666 推荐指数:

查看详情

谈谈HTML5中的history.pushSate方法,弥补ajax导致浏览器前进后退无效的问题

移动端为了减少页面请求,有时候需要通过单页面做成多页面的效果,最近有这么个需求,表单填完后执行第一步,然后执行第二步,第二步执行完后再执行第三步,每一步都要保留之前的数据。这种情况用单页面实现再合适不过了。 一般都是通过修改URL的hash,然后通过监听hashchange来达到模拟切换页面 ...

Thu May 28 18:23:00 CST 2015 1 3072
HTML5 history特性pushState、replaceState

DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,让你可以在用户的访问记录中前进后退。 从HTML5开始,我们可以开始操作这个历史记录堆栈。 1.History 使用back(),forward(),和go()方法可以在用户的历史记录中前进后退 ...

Thu May 21 00:49:00 CST 2015 3 42587
ajax前进 后退 问题 jquery.history

本文的前提是基于后台的,所以这里不会考虑seo的问题。同时,基于后台的管理系统,也不需要被收藏,所以也不会考虑刷新的这种类似直接敲网址的情况!!! 这里使用的是html5中的history.state 来解决。 网上已经有了js的开源解决方案pushState。详见pjax 标记 ...

Wed Oct 28 05:40:00 CST 2015 0 6553
pushState、replaceState、onpopstate 实现Ajax页面前进后退刷新

使用Ajax可以异步获取数据,可以更高效地渲染页面。 但也存在这一些问题: 再刷新页面页面就会变成初始的状态 浏览器的前进后退功能无效 对搜索引擎的爬虫抓取不友好 1、 早前会使用浏览器的 hash锚点 来解决 不同的hash标记着页面不同的部分,能修正页面刷新 ...

Thu Nov 10 19:44:00 CST 2016 0 1572
history特性pushState、replaceState

history,就是历史记录,h5的特性是加入了pushState与replaceState,我的理解是改变location的hash值做到无刷新页面的路由跳转,并且携带了state的相关状态信息。 先对history先作一个简要说明。 history.back()就是回退;这个方法会像用户 ...

Fri Mar 10 04:10:00 CST 2017 0 7888
通过history解决ajax不支持前进/后退/刷新

前言: 现在前后端基本都是通过ajax实现前后端接口数据的交互,但是,ajax有个小小的劣势,即:不支持浏览器“后退”和“前进“键。 但是,现在我们可以通过H5的histroy属性 解决ajax在交互请求的这个小bug。 事件描述: H5增加了一个事件window.onpopstate ...

Thu Jul 06 01:07:00 CST 2017 2 3151
利用 html的锚点(元素a)功能实现ajax页面应用的浏览器后退前进功能

一、问题 随着AJax技术的普及,单页面web程序的应用越来越广泛。 所谓单页面应用程序,简单的说,就是应用只有一个主网页,第一次加载后,后续页面只会利用js和ajax到服务器获取数据进行页面的局部刷新。 因为实际一直只有一个页面,虽然看上去页面经常发生变化(比如点了一个链接或按钮),但无法利用 ...

Wed Mar 23 17:27:00 CST 2016 0 3448
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM