这篇文章是基础: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. Css3 实现循环留言滚动效果(一)

    一.常见留言滚动效果示例 html代码 <div class="runList"> <div class="runitem"> < ...

  2. tensorflow tfdbg 调试手段

    https://blog.csdn.net/gubenpeiyuan/article/details/82710163 TensorFlow 调试程序 tfdbg 是 TensorFlow 的专用调试 ...

  3. shell编程学习笔记(九):Shell中的case条件判断

    除了可以使用if条件判断,还可以使用case 以下蓝色字体部分为Linux命令,红色字体的内容为输出的内容: # cd /opt/scripts # vim script08.sh 开始编写scrip ...

  4. 海康威视(iOS集成)

    一.注意事项 1.在开发海康威视的SimpleDemo时,最好使用真机,因为海康提供的5个库不支持模拟的i386架构. 2.在XCode9.3版本上运行SimpleDemo时,对.mm文件进行编辑时, ...

  5. Pinterest凭什么拥有那么多用户:机器学习是答案

    目前,Pinterest月平均活跃用户量达到1亿,这家以图片为主的公司是如何留住用户并盈利的呢?Pinterest的主要目标是向用户推荐相关的图片或内容,推荐的内容足够精确才能提高用户黏性.近期,&l ...

  6. jQuery(三) javascript跨域问题(JSONP解决)

    加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...

  7. 如何知道局域网内哪些ip被占用----工具法Free IP Scanner

    在局域网中,尤其是在工作室和公司中需要修改IP地址才能上网,通常我们在设置完ip地址后会提示[该ip地址已被占用],又得回头去修改ip地址.本篇经验就介绍一款很好用的免费软件——Free IP Sca ...

  8. P图软件瘦脸眼睛放大和手动瘦身功能

    一直以为是OpenCV写的没想到OpenGL能够做的东西比我想象的多. https://blog.csdn.net/zfgrinm/article/details/79291693 https://b ...

  9. 【Python】 Numpy极简寻路

    [Numpy] 先感叹下最近挖坑越来越多了.. 最近想不自量力地挑战下ML甚至DL.然而我也知道对于我这种半路出家,大学数学也只学了两个学期,只学了点最基本的高数还都忘光了的渣滓来说,难度估计有点大. ...

  10. Linux下查看内存使用情况方法总结

    Linux查看CPU和内存使用情况:http://www.cnblogs.com/xd502djj/archive/2011/03/01/1968041.html 在做Linux系统优化的时候,物理内 ...