我想应该是比较笨的一类,一个history捣鼓了一个下午才勉强算是弄懂了点….
产生方法:1.监视hash值的改变 2.利用pushState开发无刷页面切换
hash值的改变
<!-- 例1 hash值改变事件 -->
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
var oP = document.getElementById('p1');
var json= {};
oBtn.onclick = function(){
var number = randomNum(35,7);
oP.innerHTML = number;
var attr = Math.random();
// 给json添加值和属性,与页面内容形成映射关系
json[attr] = number;
window.location.hash = attr;
}
function randomNum(iAll,iNow){
var arr = [];
for(var i=1;i<=iAll;i++){
arr.push(i);
}
// 用来存取随机选出来的7个数
var arr1 = [];
for(var i=0;i<iNow;i++){
var num = Math.floor( Math.random()*arr.length );
arr1.push( arr.splice(num,1) );
}
return arr1;
}
// 产生历史管理,在前进后退时内容也能够改变
window.onhashchange = function(){
//去掉#号,从第1位开始提取
var number = json[window.location.hash.substring(1)];
oP.innerHTML = number;
}
};
</script>
</head>
<body>
<button id="btn" type="button">按钮</button>
<p id="p1"></p>
</body>
<!-- hash值改变事件结束 -->
history.pushState实现无刷新页面切换
先把用到的东西整理下:
history.state
当前URL下对应的状态信息。如果当前URL不是通过pushState或者replaceState产生的,那么history.state是null
,若改变后则就是pushState里的第一个参数的值了。
history.pushState(state, title, url)
将当前URL和history.state加入到history中,并用新的state和URL替换当前。不会造成页面刷新。
三个参数:
state
: 要跳转到的页面的状态、内容信息
title
: 页面的标题,目前还没有浏览器实现,可传个空值
url
: 要跳转到的URL地址,也可以不传。但不能跨域
history.replaceState(state, title, url)
用新的state和URL替换当前。不会造成页面刷新。
参数同pushState一样
window.onpopstate
在用户点了“前进”或“后退”按钮时触发,
通过ev.state
获取在pushState里存取的信息对象替换当前的URL
和history.state
。
关于这几个API的介绍,也有比较详细的文章,附上链接:
history.pushState实现无刷新页面切换
http://www.cnblogs.com/flash3d/archive/2013/10/23/3384823.html
-我觉得这篇文章的实现思路特别适合我这种小白看。
HTML5 history新特性pushState、replaceState
http://www.cnblogs.com/xcsn/p/4517581.html
还是用上面同样的例子:
<!-- history.pushState实现无刷新页面切换 -->
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
var oP = document.getElementById('p1');
console.log(history.state); //null
var stateObj = {"url":"测试history.state"};
oBtn.onclick = function(){
var number = randomNum(35,7);
oP.innerHTML = number;
history.pushState(stateObj.url,'',"5.eg历史管理.html");
console.log(history.state); //测试history.state
}
window.onpopstate = function(ev){
oP.innerHTML = ev.state;
// console.log( typeof JSON.stringify(ev.state) );
}
function randomNum(iAll,iNow){
var arr = [];
for(var i=1;i<=iAll;i++){
arr.push(i);
}
// 用来存取随机选出来的7个数
var arr1 = [];
for(var i=0;i<iNow;i++){
var num = Math.floor( Math.random()*arr.length );
arr1.push( arr.splice(num,1) );
}
return arr1;
}
};
</script>
</head>
<body>
<button id="btn" type="button">按钮</button>
<p id="p1"></p>
</body>
<!-- history.pushState实现无刷新页面切换结束 -->
说到应用的话,应该就是结合Ajax使用了。
很遗憾,笨拙如我,只能看别人写的,自己还实现不了。(>_<)
所以先备上两个参考文档。
history结合Ajax使用实现:
1. 张大大的:http://www.zhangxinxu.com/wordpress/?p=3432
2.csdn上的一篇:http://blog.csdn.net/oyiboy/article/details/44258477