浏览器地址历史管理-增加锚点方法

(! 未写完 回头再写)

在一个ID的页面里有两个子页面,为了点击返回键返回上一个小页面 而不是主页面 为其增加一条历史

布局如下  点击积分记录 

<div title="integrateBal" id="integrateBal" class="panel" selected="true" scrolling="no" style="background: #fff;">
   <div class="integralBal">
      <div class="jifen">
         <img src="images/integral.png">
      </div>
      <div class="integralHead1">
         <div class="integralLeft">当前积分</div>
         <div class="integralRight">积分记录</div>
      </div>
      <div class="integralHead2">
         <div class="integralNum"><i class="inNumI"></i> 分</div>
      </div>
      <div class="bonus">积分兑换商品1</div>
      <a href="#integration" data-transition="fade" class="bonus">积分兑换商品</a>
   </div>

点击积分记录显示的页面
   <div id="re" class="recentInte">
      <div class="recentInteHead">最近30天积分记录
         <button class="recentInteHeadBtn">关闭</button>
      </div>
      <ul class="recentInteList">
      </ul>
   </div>
</div>

历史部分js

bug  如果 window.location.hash ="#re" 会出现在URL地址有#re时 回车 会出现空白页

解决方案 直接把indow.location.hash ="#re"  的"re "改成 页面出现过的ID 比如主页的

integrateBal

window.location.hash = "#re"; re 是随便写的 
$(".recentInte").css({display: "block"});
$(window).bind('hashchange', function(e){
    if (window.location.hash == ""){
        $(".recentInte").css({display: "none"});
    }
});

h5历史管理

提供window.history，对象我们可以管理历史记录，可用于单页面应用， S ingle P age A pplication ，可以无刷新改变网页内容。

旧版本

history.back() 回退

history.forward() 前进

history.go(n) 前进/后退n步

history.length 历史记录条数

新增方法

1 、pushState(data, title, url) 追加一条历史记录

    data 用于存储自定义数据， 通常设为null

    title 网页标题，基本上没有被支持， 一般设为空

    url 以当前域为基础增加一条历史记录， 不可跨域设置

2 、replaceState(data, title, url) 与pushState()基本相同，不同之处在于replaceState()，只是替换当前url，不会增加/减少历史记录。

提供window.history，对象