这篇文章是基础:http://www.cnblogs.com/kaituorensheng/p/3776527.html;

histry的单页面应用有两个写法:哈希值和?;

哈希值例子:

实现效果:点击按钮实现不跳转页面而显示不同内容。

实现原理:每次点击不同按钮,a标签因为哈希值而不跳转,触发window.onhashchange事件。然后通过window.location.hash获取a标签自带的信息而发送数据请求,,然后渲染

2.用?实现的点击回退按钮查看你查过啥

实现原理:先说API:histry.pushState(能够在window的popstate事件里获取的对象(回退按钮操作时候触发),‘不用管的title’,‘?’+地址)

每次点击提交,histry会应用?增加一条历史记录而不刷新;点击回退按钮,触发popstate事件后获取存在state里的值。(还是人家说的明白,直接上图吧)

关于histry的pushstate 和 popstate事件的应用的更多相关文章

  1. pushState()、popstate事件配合ajax实现浏览器前进后退页面局部刷新

    最近研究pushState,看了网上的文章还是不怎么会用,于是自己摸索着理解使用,终于实现局部刷新同时前进后退. 首先说说pushState(),这个函数将当前的url等信息加入history堆栈中: ...

  2. 监听浏览器返回,pushState,popstate 事件,window.history对象

    在WebApp或浏览器中,会有点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面.确认离开页面或执行一些其它操作的需求.可以使用 popstate 事件进行监听返回.后退.上一页操作. 一 ...

  3. 使用history.pushState()和popstate事件实现AJAX的前进、后退功能

    上一篇文章中.我们使用location.hash来模拟ajax的前进后退功能.使用location.hash存在以下几个问题: 1.使用location.hash会导致地址栏的url发生变化.用户体验 ...

  4. 利用popstate事件和window下的history对象处理浏览器跳转问题

    引子 之前,偶尔在项目中用过history接口做返回上一页功能,当时是用的history.go(-1),前几天面试中遇到一个控制浏览器跳转的问题时有点懵,特意查了文档记录一下,并且列出一些目前能想到的 ...

  5. popstate 事件 & history API

    popstate 事件 & history API URL change 当用户浏览会话历史记录时,活动历史记录条目发生更改时,将触发 Window 界面的 popstate 事件. 它将当前 ...

  6. $.ajax居然触发popstate事件?

    我使用$.ajax用来实现一个搜索效果 近段时间因为苹果上微信浏览器的不知明原因需要处理返回事件,因此加多了popstate事件监听用来分别处理苹果跟安卓的返回. 可是居然影响到了我前面的ajax搜索 ...

  7. 通过JS拦截 pushState 和 replaceState 事件

    history.pushState 和 history.replaceState 可以在不刷新当前页面的情况下更改URL,但是这样就无法获取通过AJAX得到的新页面的内容了.虽然各种HTML5文档说  ...

  8. popstate事件在低版本webkit中的调用

    popstate是H5的history系列中的事件,但是在低版本的webkit中会自动触发.H5中的history api是不会使页面发生跳转的,只是操作地址栏和响应的state属性而已,而且是手动操 ...

  9. 进入页面就触发了popstate事件。

     $(function () {             pushHistory();             setTimeout(function () {                 win ...

随机推荐

  1. eclipse实现代码块折叠-类似于VS中的#region……#endregion

    背 景 刚才在写代码的时候,写了十几行可以说是重复的代码: 如果整个方法或类中代码多了,感觉它们太TM占地方了,给读者在阅读代码上造成很大的困难,于是想到能不能把他们“浓缩”成一行,脑子里第一个闪现出 ...

  2. SSE图像算法优化系列七:基于SSE实现的极速的矩形核腐蚀和膨胀(最大值和最小值)算法。

    因未测试其他作者的算法时间和效率,本文不敢自称是最快的,但是速度也可以肯定说是相当快的,在一台I5机器上占用单核的资源处理 3000 * 2000的灰度数据用时约 20ms,并且算法和核心的大小是无关 ...

  3. 阿里云物联网平台体验(树莓派+Nodejs篇)

    我们在<阿里云物联网平台体验(树莓派+python篇)>里,写了通过Python语言开发云到端的物联网程序,本篇文章将介绍通过nodejs来实现类似功能. 同样在阿里云官方文档里已经有了一 ...

  4. 雅克比迭代算法(Jacobi Iterative Methods) -- [ mpi , c++]

    雅克比迭代,一般用来对线性方程组,进行求解.形如: \(a_{11}*x_{1} + a_{12}*x_{2} + a_{13}*x_{3} = b_{1}\) \(a_{21}*x_{1} + a_ ...

  5. 2017年PHP程序员未来路在何方

    PHP 从诞生到现在已经有20多年历史,从Web时代兴起到移动互联网退潮,互联网领域各种编程语言和技术层出不穷, Node.js . GO . Python 不断地在挑战 PHP 的地位.这些技术的推 ...

  6. ###My SQL Date相关函数

    ###My SQL Date相关函数 #获得当前日期时间 select now(); #date_format(date,format) select date_format('2008-08-08 ...

  7. Fortran一个获取硬件系统信息的函数库

    此函数库提供了 Visual Fortran 上获取硬盘ID,CPU编号,windows安装时间及文件头部校验的四个函数.可用于简单的程序加密.(但切勿用于商业性很强的地方)              ...

  8. 再谈Promise

    方法 构造函数 接受的参数是一个带两个Function参数的函数,实际的异步代码编写在这个函数里,成功后调用第一个参数,失败调用第二个: Promise.prototype.catch 当构造函数里调 ...

  9. Spring 事务 readOnly 到底是怎么回事?

    Spring的事务经常会有这样的配置: 1 <tx:method name="search*" read-only="true" /> 或者这样的注 ...

  10. Windows 10 Version 1803 (Updated March 2018) MSDN 镜像下载

    微软已按先前预期于美国时间 2018 年 4 月 30 日正式向所有用户发布了 Windows 10 Version 1803 (Updated March 2018) 的 ISO 镜像下载,按微软官 ...