ajax可以实现无刷新响应,无刷新改变页面内容。但是他有一个很严重的弊端,就是返回按钮。当用点击返回,他是整个页面返回,
而不是返回用ajax改变的之前的内容。
比如说你的body本来是内容1,通过ajax将bogy改为内容2,
当你点击返回,你想要的效果是返回内容1,但是,很可惜不是。
解决办法有2个。
1,
通过replaceState,pushState,popstate,三个方法来实现。 下面将讲诉三个方法的作用及使用方式。
为了避免看不懂。先来说一下 ,为什么这三个方法能解决 ajax返回问题。
原理的这样的,通过改变历史记录啦解决的,比如你在内容2的时候,你把返回的页面改为内容1,也就是把最近的历史记录改为1,那你点击返回不就是回到内容1啦,这样是不是就明白了。
下面是一个简单的实现。
1,当你第一次进入页面的时候,
history.replaceState(null, document.title, location.href.split(“?”)[0] + “?” + ‘type=index’);
这个就是把当前页面地址后缀改为type=index,这个基准点。
现在历史记录只有一个
type =index
2,当你进入内容2的时候,
history.pushState({ title : ‘内容2’ }, ‘内容2’,location.href.split(“?”)[0] + “?type=2”);
这个是把type=2加入到历史记录中,也就是当前浏览器地址变为
type=2了。
现在的历史记录有2个了
type=2
type=index
3.注册事件
window.addEventListener(“popstate”, function(evt) {
var query = location.href.split(“?”)[1];
if (query == ‘type=index’) {
//页面内容变为1
}
});
这个事件是当点击返回的时候触发的。你想想当前地址是type=2,
点击返回了不就变成type=index啦。
这个只是一种例子,如果你body是跳往一个url,你可以在popstate的时候根据query的值,跳往那个链接。
2,通过描点连接实现
比如有这样三个链接
<li><a href="#/white">turn white</a></li>
<li><a href="#/blue">turn blue</a></li>
<li><a href="#/green">turn green</a></li>
当你点击第一个的时候,你会发现,你的地址后面加上了#/white.
一个关键方法就是hashchange,能够监听hash的变化,下面是一个简单的实现,其实也是一个最简单的路由。相信如果你看了第一种方式,第二种应该是一看就懂了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>router</title>
</head>
<body>
<ul>
<li><a href="#/blue">turn blue</a></li>
<li><a href="#/white">turn white</a></li>
<li><a href="#/green">turn green</a></li>
</ul>
<script>
function Router() {
this.routes = {};
this.currentUrl = '';
}
Router.prototype.refresh = function() {
this.currentUrl = location.hash.slice(2) || '/';
changeBgColor(this.currentUrl);
};
Router.prototype.init = function() {
window.addEventListener('load', this.refresh.bind(this), false);
window.addEventListener('hashchange', this.refresh.bind(this), false);
}
window.Router = new Router();
window.Router.init();
var content = document.querySelector('body');
function changeBgColor(color) {
content.style.backgroundColor = color;
}
</script>
</body>
</html>