浏览器窗口有一个history对象，用来保存浏览历史。history对象提供了一些列的方法和属性，允许在浏览器之间移动。
如果窗口包涵多个子窗口，子窗口的浏览历史会按时间顺序穿插在主窗口的历史中
<form name="form1" id="form1">
<input type="text" name="username" id="username"/>
<button onclick="clickFn()">改变地址</button>
</form>
<iframe src="pjax.html" width=100% style="margin-top: 100px;" name="test">
</iframe>
<script>
var addr = ['https://www.baidu.com', "http://www.meituan.com", "http://www.taobao.com"];
var i = 0;
function clickFn(){
if( i > 2){
i = 0;
}
window.frames['test'].location.href = addr[i];
i++;
document.getElementById('username').value = history.length;
}
</script>
所有主流浏览器都支持这两种方法(包括IE10)。
可以使用一下代码来检查当前浏览器是否支持History API
if (!!(window.history && history.pushState)){
// 支持History API
} else {
// 不支持
}
window.onpopstate是popstate事件在window对象上的事件句柄。当前活动历史项改变会触发popstate事件。调用history.pushState()创建新历史项，或调用history.replaceState()替换新的历史项,那么popstate事件的state属性会包含历史项状态对象(state)的拷贝。
window.onpopstate = function(event) {
alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.pushState({page: 3}, "title 3", "?page=3");
history.replaceState({page: 4}, "title 3", "?page=4");
history.back();
history.back();
实例
history.pushState({page: 1}, "title 1", "?page=1");
history.state
备注
window.onpopstate = function(event) {
console.log("location: " + document.location);
console.log("state: " + JSON.stringify(event.state));
};
// 或者
window.addEventListener('popstate', function(event) {
console.log("location: " + document.location);
console.log("state: " + JSON.stringify(event.state));
});
URLSearchParams API用于处理URL之中的查询字符串，即问号之后的部分。
var paramsString = "q=URLUtils.searchParams&topic=api"
var searchParams = new URLSearchParams(paramsString);
console.log(searchParams.has('topic')); // true
console.log(searchParams.get('topic')); // "api"
console.log(searchParams.getAll('topic')); // ["api"]
console.log(searchParams.get('foo')); // null
searchParams.set('foo', 2);
console.log(searchParams.get('foo')); // 2
searchParams.append('topic', 'webdev');
console.log(searchParams.toString()); //"q=URLUtils.searchParams&topic=api&foo=2&topic=webdev"
searchParams.append('foo', 3);
console.log(searchParams.getAll('foo')); // [2, 3]
searchParams.delete('topic');
console.log(searchParams.toString()); // "q=URLUtils.searchParams&foo=2&foo=3"
以下三个函数，返回的都是Iterator对象
for(var key of searchParams.keys()) {
console.log(key); // q; foo; foo
}
for(var value of searchParams.values()) {
console.log(value); // URLUtils.searchParams; 2; 3
}
for(var pair of searchParams.entries()) {
console.log(pair[0]+ ', '+ pair[1]); // q, URLUtils.searchParams; foo, 2; foo, 2
}
// URLSearchParams实例本身就是Iterator对象
for (var p of searchParams) {
console.log(p);
}