这篇文章是基础: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

    Spring Boot 介绍 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而 ...

  2. 洛谷 P1739 表达式括号匹配

    题目链接https://www.luogu.org/problemnew/show/P1739 题目描述 假设一个表达式有英文字母(小写).运算符(+,—,*,/)和左右小(圆)括号构成,以“@”作为 ...

  3. [转]The Production Environment at Google

    A brief tour of some of the important components of a Google Datacenter.   A photo of the interior o ...

  4. (七):处理MFC

    (一):简单介绍 为了可以在一个Winelib应用中使用MFC,你须要首先使用Winelib又一次编译MFC. 在理论上,你应该为Windows的MFC编写一个封装(怎样编写在后面介绍).可是,在实践 ...

  5. PHP-问题处理验证码无法显示出来

    1.问题 今天重新安装了ubuntu,PHP,MySQL,Apache,到测试CMS项目时发生一个错误: 验证码无法显示出来. 2.解决: 2.1 使用 phpinfo检查: phpinfo(); 在 ...

  6. 带你Python入门,踏进人工智能领域

    1.Python能做什么? 不知大家 没有看<中国好声音>呢?有位选择就是利用AI改编了一首周杰伦的歌<止战之殇>. Python适合做人工智能AI吗? 很明确的告诉你,可以! ...

  7. ip代理优化

    如何保证可用ip不低于2000个,代理ip池优化策略 第一:获得大量ip: 第二:验证可用ip: 第三:监控可用ip: 第三:保证可用ip不低于3000或者5000: 截图是实时可用ip数量 心得:不 ...

  8. [k8s]debug模式启动集群&k8s常见报错集合(on the fly)

    debug模式启动-支持sa 集群内(pod访问api)使用443加密 no1 no2 安装flanneld kubelet/kube-proxy m1 安装etcd/ api/contruller/ ...

  9. SQL递归方式实现省市区县级别查询

    数据库脚本 CREATE TABLE [dbo].[Std_Area]( [Id] [int] NOT NULL, [Name] [nvarchar](50) NULL, [ParentId] [in ...

  10. TensorFlow官网无法访问

    相信很多搞深度学习的小伙伴最近都为访问不了 TensorFlow官网 而苦恼吧!虽然网上也给出了一些方法,但是却缺少一个很重要的步骤.接下来,我就给大家讲解一个完整的过程,大牛绕过. 1.更改Host ...