一下所述如有疑问,可在微信与本人聊,如与技术无关请勿加本人微信;
1 使用location.hash值实现spa;
即:location.hash;
原理:1 使用事件监听,监听事件hashchange,看window.location.hash的值;
2 switch条件语句,对不同的hash,设置不同的展示内容;
3 获取不同的内容时,用ajax发送请求,请求后台数据,成功时,返回获取的数据,遍历数据,展示相应的数据;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/jquery-1.12.4.min.js"></script>
<style>
a{
text-decoration:none;
margin-left: 1rem;
}
input{
width: 10rem;
height: 2rem;
border: 1px solid black;
margin-top: 1rem;
}
</style>
</head>
<body>
<a href="#Tom">Tom</a>
<a href="#Jom">Jim</a>
<a href="#Limei">Limei</a>
</br>
<input type="text" name="" id="name" readonly>
<input type="text" name="" id="text" readonly>
<script type="text/javascript">
//获取默认的hash值,并赋值;
var hash = window.location.hash;
showContent(hash);
// 监听hash值的改变
window.addEventListener('hashchange',function(){
// 将hash值赋给hash
hash = window.location.hash;
showContent(hash);
});
// hash 的对应展示内容
function showContent(hashs){
switch(hash){
case "#Tom":
$.ajax({
url:"./json/allname.json",
success:function(data){
$("#name").val(data[0].name);
$("#text").val(data[0].text);
}
});
break;
case "#Jom":
$.ajax({
url:"./json/allname.json",
success:function(data){
$("#name").val(data[1].name);
$("#text").val(data[1].text);
}
});
break;
case "#Limei":
$.ajax({
url:"./json/allname.json",
success:function(data){
$("#name").val(data[2].name);
$("#text").val(data[2].text);
}
});
break;
default:
$.ajax({
url:"./json/allname.json",
success:function(data){
$("#name").val(data[0].name);
$("#text").val(data[0].text);
}
});
}
}
</script>
</body>
</html>
2 h5中的history;
即:window.history;
原理涉及的知识点:
1 history中原始的方法:
history.back(); 与在点击后退按钮相同;
history.forword(); 与在点击前进按钮相同;
history.go() 接受一个整数,跳转到整数指定的页面,go(1) 相当于forword,go(-1)相当于back;go(0) 相当于刷新页面;
2 h5中新增的方法:pushState()方法和replaceState()方法,这 push两个方法可以向历史栈中添加数据,就好像url()变化了一样;这样就可以模拟浏览前进和后退的,前端路由也是同理;
(1)history.pushState(stateObj,title,url);
stateObj:一个与指定网址相关的状态对象,popstate事件触发;该对象会传入回调函数。如果不需要这个对象,可以传入null;
title:新页面的标题;
url:新的地址,必须与当前页面处于同一域,浏览器的地址将显示这个网址;
注意:
1 pushState() 方法不会触发页面刷新,只是导致history对象发生变化,只有back(),forword(),go() 才会使浏览器刷新;
2 这里的url是同源策略限制的,用来防止恶意脚本模仿其他网站的url来欺骗用户,所以当违背同源策略时会报错;
( 2 )history.replaceState(stateObj,title,url);
替换当前浏览历史的当前记录;其余和pushState() 一样;
(3) popState事件;
定义:每当同一个文档的浏览历史(即history对象)出现变化时,就会触发popState;
注意:仅仅调用pushState和replaceState方法,并不会触发该事件,当用用户点击后退和前进的时候才会触发,或者使用javascript调用back(),go(),forword()方法时才触发;另外事件只针对同一个文档,如果历史浏览的历史加载,导致加载不同的文档,该事件也不会触发;
用法: 使用的时候,可以为popState事件指定回调函数。这个回调函数的参数是一个event事件对象;他的state的属性指向pushState()和 replaceState()方法为当前url所提供的转态对象(即第一个参数);
总结:
1 获取按钮,对不同按钮绑定对应浏览器向前,和向后浏览的事件;
2 由于history会自动触发popstate事件,输出不同地址,对应不同的内容即可;
5 history实现spa前端路由代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<a class="api a">a.html</a>
<a class="api b">b.html</a>
<br>
<input type="text" name="" id="">
<button class="loca back">Back</button>
<button class="loca forword">Forword</button>
<script>
//注册路由
document.querySelectorAll('.api').forEach(item => {
item.addEventListener('click',e=>{
e.preventDefault();
let link = item.textContent;
console.log(link);
if(!!(window.history && history.pushState)){
window.history.pushState({name:'api'},link,link);
console.log(window.history);
}else{
console.log(window.history+'00');
}
},false)
});
//监听路由
window.addEventListener('popstate',e=>{
let loc = location.href.split("/");
console.log(loc);
console.log({
location:loc[3],
state:e.state
});
document.querySelector('input').value = loc[3];
},false)
//绑定事件,向前绑定,向后绑定
document.querySelectorAll('.loca').forEach(item =>{
item.addEventListener('click',function(){
let sign = item.textContent;
if(!!sign){
if(sign === "Back"){
window.history.back();
}else{
window.history.forward();
}
}
})
});
</script>
</body>
</html>