这篇文章是基础：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. spring boot 中添加mongodb支持

    1.添加maven依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactI ...

  2. 高斯模糊的Java实现

    1.http://jhlabs.com/ip/index.html public static byte[] blur(byte[] data) throws IOException { ByteAr ...

  3. git强制提交本地分支覆盖远程分支

    git push origin 分支名 --force eg: cd 代码目录 git push origin master --force 运行结果: Total 0 (delta 0), reus ...

  4. 数据分析：基于Python的自定义文件格式转换系统

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  5. （原）DropBlock A regularization method for convolutional networks

    转载请注明出处: https://www.cnblogs.com/darkknightzh/p/9985027.html 论文网址: https://arxiv.org/abs/1810.12890 ...

  6. NodeJs之fs

    NodeJs版本:4.4.4 fs的实用方法 查看文件信息(fs.stat) 定义:fs.stat(path, callback) var fs = require('fs'); fs.stat('t ...

  7. Form 组件的学习

    学习链接:http://www.cnblogs.com/haiyan123/p/7778888.html Form组件可以做的几件事情: 1.用户请求数据验证 2.自动生成错误信息 3.打包用户提交的 ...

  8. C# 批量图片打包下载

    实现点击下载功能,可以一次性下载多个附件.具体实现代码如下 : private void Com_XZTP_FJ(string maiId, string wtfjdz, string CLwtfjd ...

  9. maven私服不能重复部署解决

    1.报错 Return code is: 400, ReasonPhrase: Repository does not allow updating assets: maven-releases. 2 ...

  10. Oracle 傻瓜式数据归档

    推荐用方法二 方法一 [本库备份,分区表需要另写CREATE TABLE方法] ----------------------------------------------- ; ; ; ; RENA ...