这篇文章是基础: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. 众里寻他千百度?No!这项技术只需走两步就能“看穿”你!

    电影<碟中谍5>中阿汤哥带上了面具,顺利通过指纹锁,三重物理等重重关卡,却最终仍旧功亏一篑,正是由于“ 火眼金睛 ”——步态识别 .   (图片来源:碟中谍) 中国科学院自动化所的专家日前 ...

  2. Nginx配置,413 Request Entity Too Large错误解决

    今天有同事找我,说图片上传之后,不知道去哪里了.分析了一下问题,找到原因之后做了处理,这里简要记录一下. 问题原因: 1.首先后台log并无错误信息: 2.捡查了一下浏览器,发现network中有报错 ...

  3. grid - 网格轨道对齐方式

    网格轨道对齐可以相对于网格容器行和列轴. align-content指定网格轨道沿着行轴对齐方式:justify-content指定网格轨道沿着列轴对齐方式.它们支持下面属性: normal star ...

  4. 哪些 Python 库让你相见恨晚?【转】

    原文链接:https://www.zhihu.com/question/24590883/answer/92420471 原文链接:Python 资源大全 ---------------- 这又是一个 ...

  5. Linux 互斥锁

    互斥的概念 在多线程编程中,引入了对象互斥锁的概念,来保证共享数据操作的完整性. 每个对象都对应于一个可称为" 互斥锁" 的标记,这个标记用来保证在任一时刻, 只能有一个线程访问该 ...

  6. securecrt8.1破解版安装与注册机的使用方法

    转自:https://blog.csdn.net/sun897827804/article/details/78532157?locationNum=9&fps=1 SecureCRT是一款用 ...

  7. Atitit 支出分类表 会计科目(1)资产(2)负债(3)资本(4)收益(5)费用(成本) 资产分类表 attilax总结

    Atitit 支出分类表  会计科目(1)资产(2)负债(3)资本(4)收益(5)费用(成本)  资产分类表 attilax总结 会计科目对一般不懂会计的管理人员,常会有莫测高深的感觉,因此不仅不愿去 ...

  8. Eclipse安装Git插件及简单操作

    0. 前言 说一件事,说起来也是好笑,工作三年半了,还没接触到团队开发,都是一个人小打小闹.因此连Git都没有使用过.感觉好Low的,这一篇,简单讲一下,Eclipse配置Git插件,并提交代码到Gi ...

  9. select 与 time.After 配合使用的问题

    今天在工作中发现了一个有趣的现象. 在一个select中设定了两个定时器,本来预计哪个定时器到达就运行相应指令的,但是发现最终只有时间最短的定时器一直得到执行,其它定时器完全没有得到执行. packa ...

  10. [转]SOA架构设计经验分享—架构、职责、数据一致性

    阅读目录: 1.背景介绍 2.SOA的架构层次 2.1.应用服务(原子服务) 2.2.组合服务 2.3.业务服务(编排服务) 3.SOA化的重构 3.1.保留服务空间,为了将来服务的组合 4.运用DD ...