首页 > 其他 > 详细

历史状态管理

时间:2014-09-19 13:36:15      阅读:223      评论:0      收藏:0      [点我收藏+]

var go = document.querySelector( ".go" ),
           back = document.querySelector( ".back" ),
           url=window.location.href;


   W.addHandler( go, "click", function () {
       history.go(1);
   } );

   W.addHandler( back, "click", function () {
       history.go(-1);
   } );

 

   W.addHandler( window, "hashchange", function () {

       W.log( window.location.href );
       //pushState在前端创造假的url和后台真url对应
       history.pushState({name:url.hash},"new page");
       //第一个参数 状态信息 用于初始化页面
       // 第二个参数 新状态的标题(没有浏览器实现 可设为kong)
       //第三个参数 可选的相对url 对应服务器的真实url
   } );


   //利用hashchange可以在页面未打开一个全新页面的情况下把改变写入history 使后退前进依然有效

  //状态变化时触发 包括前进后退 在这里可以操作页面 载入服务器真实url的内容
   W.addHandler(window,"popstate",function(event){

       var state=event.state;
       alert(state.name);
       if(state){ //第一个页面加载时state为空
           //do something
       }
   });

   //replaceState不会再历史状态栈,只会重写当前的状态 改变popstate拿到的state
      history.replaceState({name:"replace"},"haha");

   window.location.href = url+ "#dsd";

历史状态管理

原文:http://www.cnblogs.com/zodiacblog/p/3981109.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!