HTML5 API 之 history

*:first-child {
margin-top: 0 !important;
}

body>*:last-child {
margin-bottom: 0 !important;
}

/* BLOCKS
=============================================================================*/

p, blockquote, ul, ol, dl, table, pre {
margin: 15px 0;
}

/* HEADERS
=============================================================================*/

h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
}

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
font-size: inherit;
}

h1 {
font-size: 28px;
color: #000;
}

h2 {
font-size: 24px;
border-bottom: 1px solid #ccc;
color: #000;
}

h3 {
font-size: 18px;
}

h4 {
font-size: 16px;
}

h5 {
font-size: 14px;
}

h6 {
color: #777;
font-size: 14px;
}

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
margin-top: 0;
padding-top: 0;
}

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0;
}

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
margin-top: 10px;
}

/* LINKS
=============================================================================*/

a {
color: #4183C4;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

/* LISTS
=============================================================================*/

ul, ol {
padding-left: 30px;
}

ul li > :first-child,
ol li > :first-child,
ul li ul:first-of-type,
ol li ol:first-of-type,
ul li ol:first-of-type,
ol li ul:first-of-type {
margin-top: 0px;
}

ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0;
}

dl {
padding: 0;
}

dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px;
}

dl dt:first-child {
padding: 0;
}

dl dt>:first-child {
margin-top: 0px;
}

dl dt>:last-child {
margin-bottom: 0px;
}

dl dd {
margin: 0 0 15px;
padding: 0 15px;
}

dl dd>:first-child {
margin-top: 0px;
}

dl dd>:last-child {
margin-bottom: 0px;
}

/* CODE
=============================================================================*/

pre, code, tt {
font-size: 12px;
font-family: Consolas, "Liberation Mono", Courier, monospace;
}

code, tt {
margin: 0 0px;
padding: 0px 0px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
}

pre>code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}

pre {
background-color: #f8f8f8;
border: 1px solid #ccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
}

pre code, pre tt {
background-color: transparent;
border: none;
}

kbd {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DDDDDD;
background-image: linear-gradient(#F1F1F1, #DDDDDD);
background-repeat: repeat-x;
border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
border-image: none;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
padding: 1px 4px;
}

/* QUOTES
=============================================================================*/

blockquote {
border-left: 4px solid #DDD;
padding: 0 15px;
color: #777;
}

blockquote>:first-child {
margin-top: 0px;
}

blockquote>:last-child {
margin-bottom: 0px;
}

/* HORIZONTAL RULES
=============================================================================*/

hr {
clear: both;
margin: 15px 0;
height: 0px;
overflow: hidden;
border: none;
background: transparent;
border-bottom: 4px solid #ddd;
padding: 0;
}

/* TABLES
=============================================================================*/

table th {
font-weight: bold;
}

table th, table td {
border: 1px solid #ccc;
padding: 6px 13px;
}

table tr {
border-top: 1px solid #ccc;
background-color: #fff;
}

table tr:nth-child(2n) {
background-color: #f8f8f8;
}

/* IMAGES
=============================================================================*/

img {
max-width: 100%
}
-->

HTML5 API 之 history

简介

可以操作浏览器的历史记录，在其中添加项目。配合新增的popstate事件，可以实现在不刷新页面的前提下动态的改变浏览器地址的Url和页面内容。

使用

var state = {};
state.name = 'history-1';
window.history.pushState(state,null,'history-1');
state.name = 'history-2';
window.history.pushState(state,null,'history-2');
window.addEventListener('popstate',myfunc,false);
function myfunc(e){
    if(e.state){
        alert(e.state.name);
    }
}

history.pushState

var state = {};
state.name = 'history-1';
window.history.pushState(state,null,'history-1');

• 首先，我们创建了一个空对象。这个对象就是我们传给pushState方法的第一个参数。它的作用是保存当前页面的一些信息，当我们通过前进或者后退按钮到达这个页面的时候，可以访问这个对象中保存的信息。在上面的栗子中，我们访问的是的它的name属性。
• pushState的第二个参数，用来设置页面的标题，但是目前好像没有浏览器支持，所以我们传入一个null。
• 第三个参数，是我们希望在地址栏中显示的url后面附加的字符串，这样，我们可以清晰的看到页面url的变化。
• 这样，一条历史记录就被我们添加了。

popstate

window.addEventListener('popstate',myfunc,false);

当浏览器前进或者后退的时候触发

• popstate是HTML5种新增的事件。当点击浏览器的前进或者后退时，触发改事件。该事件的默认参数是一个PopStateEvent对象。该对象中有一个state属性，包含历史记录中一个页面保存的信息。结合本文的例子来看，保存的就是我们创建的state对象。

• 那么，我们就试着去访问一个这个对象，看看其中是否真的包含我们存进去的state对象的信息。

  function myfunc(e){
      if(e.state){
          alert(e.state.name);
      }
  }
  

• 点击后退，屏幕弹框显示

  history-1

• 总结：HTML5 的historyAPI可以方便的控制页面的历史记录，让我们有了在单页面中实现前进后退动作的更好方式。结合pushState方法的第一个参数，让我们构建单页面应用更加的心应手。