这篇文章是基础：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. fastjson转换json字符串key的首字母小写变大写的解决办法

    https://blog.csdn.net/erbao_2014/article/details/53688934 问题描述在开发过程中,由于接口文档的描述,要求json字符串的key首字母为大写,而 ...

  2. 【问题与解决】Mac OS通过 npm 安装 React Native 报错（checkPermissions Missing write access to /usr/local/lib/node_modules）

    报错情况: 当Mac OS通过 npm 安装 React Native 报错,警告文字为:checkPermissions Missing write access to /usr/local/lib ...

  3. 每天一个linux命令:free

    1.命令简介 free (free) 命令可以显示Linux系统中空闲的.已用的物理内存及swap内存,及被内核使用的buffer. 2.用法 free [-b | -k | -m | -g | -h ...

  4. POSIX 线程的创建与退出

    前言 创建线程: pthread_create() 退出线程: pthread_exit()return pthread_cancel() 线程的创建 使用多线程,首先就需要创建一个新线程.那么线程是 ...

  5. MySQL 8 中新的复制功能

    MySQL 8 中新的复制功能使得操作更加方便,并帮助用户更好地观察复制过程中内部发生的情况. 使用 MySQL 5.7.17 获取 MySQL 组复制插件是一项巨大的工作.组复制是一个新的插件,通过 ...

  6. CentOS 7.5 安装KVM虚拟机(Linux)

    1.认识理解KVM虚拟机 Kernel-based Virtual Machine的简称,是一个开源的系统虚拟化模块,自Linux 2.6.20之后集成在Linux的各个主要发行版本中.它使用Linu ...

  7. prometheus杂碎

    一个监控及告警的系统,内含一个TSDB(时序数据库).在我而言是一个数采程序 重要成员分三块 exploter:实际是外部接口,让各个程序实现这个接口,供普罗米修斯定时从此接口中取数 alert:告警 ...

  8. JSP之连接SQL Server

    1.在SQL Server中启用sa(请参考本人博客:http://www.cnblogs.com/zhouhb/archive/2011/02/15/1955324.html)2.在SQL Serv ...

  9. 嵌入式开发之网络心跳包---阻塞和非阻塞以及是否有必要心跳包heartbeat

    1.1 TCP和UDP的心跳包是用来维持长连接的 心跳包只是用来检测socket的链接状态 2.1 非阻塞情况下TCP 心跳包是否有必要建立心跳包 需要, a.如果说 严格 检测掉线的话 那么不管是不 ...

  10. Vim替换查找

    ##一.字符的替换及撤销(Undo操作)       ###1.替换和撤销(Undo)命令       替换和Undo命令都是针对普通模式下的操作       命令 | 说明   -----|---- ...