if (window.history.pushState) {
var urlString = document.location.search;
if (urlString != null) {
var typeQu = fieldName + "=";
var urlEnd = urlString.indexOf(typeQu);
if (urlEnd != -1) {
var paramsUrl = urlString.substring(urlEnd + typeQu.length);
var isEnd = paramsUrl.indexOf('&');
if (isEnd != -1) {
return paramsUrl.substring(0, isEnd);
}
else {
return paramsUrl;
}
}
else {
return "";
}
}
else {
return "";
}
} else {
return '';
}
}
//调用方法：getUrlParameter('要查询的参数')
复制代码
总结：
表达能力实在有限，快速总结一下。我个人采用的是url的方法来获取参数的，因为觉得这样更加稳妥，毕竟对于onpopstate中e.state琢磨的还是很透彻，而url从某种方式上来更加的合理与稳妥一点。具体还需要根据实际情况来处理，采用url的方式需要服务器上对相应的url进行一番处理。
window.history.pushState()方法中参数Data里面的值不允许为对象，可以这样{ pageIndex : 1 },但是不可以这样{ pageDom : document.getElementById('testId') }
window.history.pushState()方法中参数url不允许跨域。
目前在Firefox下onpopstate事件不会在page load中加载执行。
如果后台需要区别是ajax还是经过push历史的ajax，可以在pushState中的ajax里面发送特殊的请求头，后台接收到该特殊的请求头信息后进行特殊处理。
还有没补充的例如浏览器兼容性神马的请拉到文章最下面。
其他：
提供一份自己写的一份相应的js，直接copy使用即可。
复制代码
//historyState对象，提供push历史数据和获取历史数据方法。
//linkFly原创，引用请注明出处，谢谢
var historyState = {
checkCanPush: function () {
///
/// 检测浏览器是否支持pushState方法
///
///
if (window.history.pushState)
return true;
return false;
},
pushState: function (data, url) {
///
/// 状态保持方法（需要高版本浏览器支持），当canPush为true的时候表示浏览器可以进行push状态，则进行状态push并返回是否成功
///
1.1 - pushState(data,url) 将指定的data,和url push到浏览器会话历史进行状态保持【注意Url不允许跨域】
///
///
/// 需要写入浏览器会话历史的url
///
///
if (historyState.checkCanPush()) {
//注意data虽然可以保存数据，但是不能保存仍然引用着当前页面元素的对象，例如$("DOM")这样一个对象，就会出现ObjectCloneError
window.history.pushState(data, document.title, url);
return true;
}
return false;
},
getUrlParameter: function (fieldName) {
///
/// 1: 获取地址栏参数方法
///
- getUrlParameter(fieldName) - 在当前Url中查询指定的参数，返回查询得到的值，当不支持pushState或没有查询到参数的时候返回空字符串
///
///
/// 要查询的字符串
///
///
if (historyState.checkCanPush()) {
var urlString = document.location.search;
if (urlString != null) {
var typeQu = fieldName + "=";
var urlEnd = urlString.indexOf(typeQu);
if (urlEnd != -1) {
var paramsUrl = urlString.substring(urlEnd + typeQu.length);
var isEnd = paramsUrl.indexOf('&');
if (isEnd != -1) {
return paramsUrl.substring(0, isEnd);
}
else {
return paramsUrl;
}
}
else {
return "";
}
}
else {
return "";
}
} else {
return '';
}
}
}
//historyState对象调用示例
window.onload = function () {
//写入历史会话
historyState.pushState({ pageIndex: 1 }, w