关于history.js的使用

项目地址: https://github.com/browserstate/history.js

做wap端的时候,有些时候一个页面里有很多小页面或者标签,希望刷新浏览器或者按返回键的时候,能够被当成一个页面去处理。所以就去找html5是否提供这样的接口。

最后发现确实有这个接口,但兼容性 不好。

后来发现这个插件 history.js,可以兼容各大浏览器。 html4是使用Hash值进行兼容。所以在获取url 问好后面的值时,需要判断是否是兼容模式。

js中如果是hash兼容模式 window.location.hash 这个值是不为空,如果不是hash兼容模式 window.location.hash值为空。

history.js 提供的demo也很简单

(function(window,undefined){
  // Bind to StateChange Event
  History.Adapter.bind(window,‘statechange‘,function(){ // Note: We are using statechange instead of popstate
    var State = History.getState(); // Note: We are using History.getState() instead of event.state
  });
  // Change our States
  History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"
  History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2"
  History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3"
  History.pushState(null, null, "?state=4"); // logs {}, ‘‘, "?state=4"
  History.back(); // logs {state:3}, "State 3", "?state=3"
  History.back(); // logs {state:1}, "State 1", "?state=1"
  History.back(); // logs {}, "Home Page", "?"
  History.go(2); // logs {state:3}, "State 3", "?state=3"
})(window);

  初次看,压根没看懂是如何使用的。。。。

经过实践,特来解释下上边的代码

//History主要改变的问号后面的键值。。
//这个是向浏览历史压入一条新纪录
//记录为当前url且问号后面的值为 state=1,
//将一个{state:1}对象压入该链接中,供下面的历史事件触发时调用,
//State 1 为其新的标题 (即head title);
//这个动作会触发下面statechange 事件
History.pushState({state:1}, "State 1", "?state=1");

//改变当前url问好后面的值
//不触发statechange事件//不增加历史记录
History.replaceState({state:3}, "State 3", "?state=3");

//前提是通过History.pushState 增加的历史记录。
// 向前跳或者向后跳都会出发这个事件,刷新不会
//State对象中的data就是 上面存入的对象 {state:3}
History.Adapter.bind(window,‘statechange‘,function(){
    var State = History.getState(); instead of event.state
});

所以无论是将一条url压入历史中、返回上一页、向前跳一页等等(不包括刷新和原来的历史记录),都会触发statechange事件。 剩下的自己发挥。

原先我不知道压入的时候会触发,后面调试的时候才发现,也会。 这是个坑。。。

时间: 2024-10-28 23:10:04

关于history.js的使用的相关文章

history.js使用方法(来自博客园)

Ajax保留浏览器历史的解决方案 <ul class="menu"><li><a href="/home/index#page=1">page1</a></li><li><a href="/home/index#page=2">page2</a></li><li><a href="/home/index#page

history.js 一个无刷新就可改变浏览器栏地址的插件(不依赖jquery)

示例: http://browserstate.github.io/history.js/demo/ 简介 HTML4有一些对浏览历史的前进后退API的支持如: window.history.back();window.history.forward();window.history.go(-1);window.history.go(1); HTML5浏览器新添加了不刷新改变网址地址的API: var currentState = history.state;var stateObj = { f

./node_modules/history/esm/history.js Module not found: Can&#39;t resolve &#39;@babel/runtime/helpers/esm/extends&#39;

从同事手中接手项目之后.npm install 然后npm start的时候.开始报上图的错误.解决方法一(比较 愚蠢)当时找到的解决方法都没有用.然后只能按照报错的路径,从同事那边复制了node_modules下面的文件(报错路径文件替换掉),ran然后在npm start的时候,项目可以正常运行.(下图为当时替换掉的文件) 解决方法二  替换roadhog的版本为   "roadhog": "^2.5.0-beta.4", 然后删掉node_modules文件夹

SPA学习之 - 路由插件(crossroads.js)

Crossroads.js是一个受Rails, Pyramid, Django, CakePHP等基于路由/分发(Route/Dispatch)方式处理路由的后端MVC框架启发的一套js专业路由库.它能够直接解析传入的字符串并根据相应的规则来过滤和验证路由,然后再执行下一步的操作. A duck can walk, fly and swim, but he can’t do any of these things well… crossroads.js是一个独立的库功能十分强大和灵活,而且职责单

JS之DOM

SCREEN <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Screen</title> </head> <body> </body> <script> console.log(screen.width);/*屏幕宽度*/ console.log(scre

JS与FLEX|AS实现互相调用

1.AS代码 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="200" height="200" creationComplete="initApp()"&

使用HTML5的History API

HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL.这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的URL来反应出页面内容的变化,这时该功能可以派上用场. 举个例子,当用户从首页进入帮助页面时,我们通过Ajax来加载帮助页面的内容.然后这个用户又转到产品页面,我们需要再一次通过Ajax请求来替换页面的内容.当用户想分享页面的URL时,通过History API,我们可以改变页面的URL来反应内容的

有关html5的history api

从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页,所以你又要重新翻一次. 再或者,你想把这个评论发给别人分享,一面给了别人页面地址(为什么不直接复制呢?因为要连带视频等场景啊),一面又要加一句嘱咐:请翻到下面评论的第XX页的XX楼. 这就是问题.试想一下,如果浏览器能记住你当前的状态(比如看到了第十几页),而不是一刷新就还原,是不是就显得智能多了

JS学习记录(补充四)

History对象<html lang="en"> <head> <meta charset="UTF-8"> <title>History对象</title> </head> <body> <a href="Demo40.html">Demo40</a> <button onclick="forward()"&g