标签：比较 文本 string keyword 必须 some block 参数 googl
【01】
【】在使用HTML5的状态管理机制时，请确保使用pushState()创造的每一个“假”URL，在Web服务器上都有一个真的、实际存在的URL与之对应。否则，单击“刷新”按钮会导致404错误。
先来看看"history"接口的详细方法：
interface History {
readonly attribute long length;
readonly attribute any state;
void go(optional long delta);
void back();
void forward();
void pushState(any data, DOMString title, optional DOMString? url = null);
void replaceState(any data, DOMString title, optional DOMString? url = null);
};为了提高Web页面的响应速度，越来越多的开发者开始采用单页面结构（single-page application）的解决方案。
所谓的单页面结构就是指多个页面间切换时，不刷新当前整个页面，更新页面展示数据，并且相应地改变地址栏中的url，以使用户可以分享这个url。
如果你使用chrome或者firefox等浏览器访问"github.com、plus.google.com"等网站时，细心的你会发现页面之间的点击是通过ajax异步请求的，
同时页面的URL发生了改变。并且能够很好的支持浏览器前进和后退。
为了用变成方式确定浏览器是否支持这个API，可以用下面的一行代码检验：
return !!(window.history && history.pushState);如果你是用的现代浏览器，可以用下面的代码：
if (Modernizr.history) { // History API Supported}如果你的浏览器不支持History API，可以使用history.js代替。
**
【02】length 属性定义和用法
返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页。例如，在一个新的选项卡（浏览器）加载的一个页面中，这个属性返回1。
length 属性声明了浏览器历史列表中的元素数量。
保存着历史记录的数量。这个数量包括所有历史记录，即所有向后和向前的记录。对于加载到窗口、标签页或框架中的第一个页面而言，history.length等于0。
通过像下面这样测试该属性的值，可以确定用户是否一开始就打开了你的页面。
if (history.length == 0){
//这应该是用户打开窗口后的第一个页面
}
注释：IE 6 和 Opera 9 以 0 开始，而 Firefox 1.5 以 1 开始。
语法history.length
实例<html>
<body>
<script type="text/javascript">
console.log(history.length);
</script>
</body>
</html>
**
history.pushState({name:"魔芋"},"moyu","moyu.html");
console.log(history.state);
**
调用该方法的效果等价于点击前进按钮或调用 history.go(1)。
语法定义和用法forward() 方法可加载历史列表中的下一个 URL。history.forward()
等同于点击浏览器的前进按钮。
实例下面的例子可以在页面上创建一个前进按钮：
<html>
<head>
<script type="text/javascript">
function goForward()
{
window.history.forward()
}
</script>
</head>
<body>
<input type="button" value="Forward" onclick="goForward()" />
</body>
</html>
【03】back() 方法
定义和用法
back() 方法可加载历史列表中的前一个 URL（如果存在）。
调用该方法的效果等价于点击后退按钮或调用 history.go(-1)。
等同于点击浏览器的后退按钮。
语法：
history.back()
例子：
<html>
<head>
<script type="text/javascript">
function goBack()
{
window.history.back()
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()" />
</body>
</html>
**
go() 方法可加载历史列表中的某个具体的页面。
history.go(number|URL)
负数表示向后跳转（类似于单击浏览器的“后退”按钮），正数表示向前跳转（类似于单击浏览器的“前进”按钮）。history.go(-2);// 后退两个历史记录，相当于单击"后退"按钮两次
go(1) ;//前进一个;
go(-1) ; /后退一个;
URL 参数使用的是要访问的 URL，或 URL 的子串。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。
也可以给go()方法传递一个字符串参数，此时浏览器会跳转到历史记录中包含该字符串的第一个位置——可能后退，也可能前进，具体要看哪个位置最近。
如果历史记录中不包含该字符串，那么这个方法什么也不做，例如：
//跳转到最近的wrox.com页面
history.go("wrox.com");
//跳转到最近的nczonline.net页面
history.go("nczonline.net");history.go(0)相当于刷新当前页面。下面例子会加载历史列表中的前一个页面：
<html>
<head>
<script type="text/javascript">
function goBack()
{
window.history.go(-1)
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()" />
</body>
</html>
但是，浏览器并不会真的向服务器发送请求，即使状态改变之后查询location.href也会返回与地址栏中相同的地址。
另外，第二个参数目前还没有浏览器实现，因此完全可以只传入一个空字符串，或者一个短标题也可以。
history.pushState(javascriptObj,"some string","url");
history.pushState({username: "html5"}, "user account", "user.html");
<script>
history.pushState({username: "html5"}, "user account", "c.html");
console.log(history);
</script>
.html是否存在，它只是成为浏览历史中的最新记录。
pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应。如果pushState的url参数，设置了一个新的锚点值（即hash），并不会触发hashchange事件。如果设置了一个跨域网址，则会报错。
history.pushState({title: ‘twitter‘}, ‘twitter‘, ‘https://twitter.com/w3cplus‘)
上面代码中，pushState想要插入一个跨域的网址，导致报错。
这样设计的目的是，防止恶意代码让用户以为他们是在另一个网站上。
在Safari和Chrome中，传递给pushState()或replaceState()的状态对象中不能包含DOM元素。
而Firefox支持在状态对象中包含DOM元素。
Opera还支持一个history.state属性，它返回当前状态的状态对象。
**
history.replaceState({username: "html5" }, "user account", "user.html");
**
pushState()会创建新的历史状态，会发现“后退”按钮也能使用了。
按下“后退”按钮，会触发window对象的popstate事件。
history对象）发生变化时，就会触发popstate事件。history.pushState()或history.replaceState()方法时，并不会触发popstate事件。history.back()、history.forward()和history.go()方法时才会触发。popstate事件只针对同一个文档，如果浏览器历史的切换，导致加载不同的文档，该事件也不会被触发。window.onpopstate = function(event){
console.log(event.state); //输出pushState()或者replaceState()设置的state信息
}
也可以这样使用：
window.addEventListener(‘popstate‘, function(event) {
console.log(‘location: ‘ + document.location)
console.log(‘state: ‘ + JSON.stringify(event.state))
})
<div id="click-item"></div>
<div id="result-item"></div>
<script type="text/javascript">
var clickItem = document.getElementById(‘click-item‘);
var resultItem = document.getElementById(‘result-item‘);
clickItem.onclick = function(){
resultItem.innerHTML = ‘clicked!‘;
history.pushState({note: ‘set result‘}, ‘‘, ‘result.html‘);
}
</script>
popstate事件的事件对象有一个state属性，这个属性就包含着当初以第一个参数传递给pushState()的状态对象。
popstate事件发生后，事件对象中的状态对象（event.state）是当前状态。
EventUtil.addHandler(window, "popstate", function(event){
var state = event.state;
if (state){ //第一个页面加载时state为空
processState(state);
}
});
得到这个状态对象后，必须把页面重置为状态对象中的数据表示的状态（因为浏览器不会自动为你做这些）。
记住，浏览器加载的第一个页面没有状态，因此单击“后退”按钮返回浏览器加载的第一个页面时，event.state值为null。
注意：页面第一次加载的时候，在load事件发生后，Chrome和Safari浏览器（Webkit内核）会触发popstate事件，而Firefox和IE浏览器不会。
**
标签：比较 文本 string keyword 必须 some block 参数 googl
原文地址：https://www.cnblogs.com/moyuling/p/8970760.html
