history API

阳光穿透心脏的1/2处 2022-08-18 12:12 150阅读 0赞

这里讲的history包括两个，一个是宿主对象history，一个是HTML5的history API。

# 宿主对象history #

history包括三个方法和一个属性：

<table style="margin:10px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:709px; color:rgb(0,0,0); font-family:Verdana,Arial,宋体; font-size:12px; background-color:rgb(249,249,249)"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(170,170,170); vertical-align:baseline; width:165px; background-color:rgb(213,213,213)"> 属性/方法</th> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(170,170,170); vertical-align:baseline; width:500px; background-color:rgb(213,213,213)"> 描述</th> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> length</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 返回浏览器历史列表中的 URL 数量。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> back()</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 加载 history 列表中的前一个 URL。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> forward()</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 加载 history 列表中的下一个 URL。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> go(int N)</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 加载 history 列表中的某个具体页面,参数为整数，正数相当于forward N次，负数相当于back N次。</td> 
  </tr> 
 </tbody> 
</table>

其中，当没有前一个url时，back方法不起作用，但也不会报错。forward同理。go函数当参数超出实际可跳转的范围时也不会起作用

# HTML5 API #

HTML5中增加了两个API和一个事件。

其中，参数的格式及意义如下：

data： json格式，表示状态（state）的对象

title：string， 标题，目前主流浏览器都不会处理这个标题，这里传null就可以。  
url：string，url。（用于替换当前url）

# popState事件 #

history.go和history.back（包括用户按浏览器历史前进后退按钮）触发，并且页面刷新的时候（由于使用pushState修改了history）会触发popstate事件，事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。通过event.state也可以获取history.state。

window.addEventListener('popstate', function(e) {
        if (e.state) {
            // ...
        }else{
            // 页面初始化的时候state为null，需要做的处理    
        }
        // 当然也可以直接使用history.state来获取当前对应的state数据。
    });

注：  
有些浏览器在页面初始化时不会触发popstate事件。  
有的浏览器在页面初始化时会触发popstate事件（如safiri），此时的e.state（或者说是history.state）为null，（但是刷新后点击前进回退操作仍会有之前的历史记录）

参考： [http://blog.csdn.net/hdchangchang/article/details/41959313][http_blog.csdn.net_hdchangchang_article_details_41959313]

[http_blog.csdn.net_hdchangchang_article_details_41959313]: http://blog.csdn.net/hdchangchang/article/details/41959313