随着用户体验的深入人心，越来越多的系统采取了单页面结构（SPA），不可不说，单页面系统体验好，耗费流量少，无需全局刷新。不过对搜索引擎却不能抓取到太多信息，对SEO不是很友好，举例来说
搜索引擎只能获取
www.demo.com/index.html这个页面的内容，
但是无法获取
www..demo.com/index.html#user
www..demo.com/index.html#detail
等页面的内容，因为搜索引擎是不会管#后面的内容，这样就造成了数据丢失，不利于网站排名,
那么有没有一个方法可以更改url地址，同时兼顾ajax获取页面呢？
借助html5新的API pushState可以很好的解决这个问题
我们看一个代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="nav">
<li><a href="#user">user</a></li>
<li><a href="#detail">detail</a></li>
</ul>
<div id="container">
</div>
</body>
<script>
var ul = document.querySelector('#nav'),container = document.querySelector('#container');
//设置页面内容方法
var setContainer = function (url) {
//ajax请求页面template
container.innerHTML = 'ajax返回的页面' + url;
};
ul.addEventListener('click',function (e) {
var target = e.target;
if (target.nodeName !== 'A') {
return;
}
var url = target.hash.replace('#','');
history.pushState(url,null,url); // 当A标签触发点击时，改变浏览器url
setContainer(url);
e.preventDefault();
e.stopPropagation();
});
//当用户使用前进/后退按钮时候
window.addEventListener('popstate',function (e) {
setContainer(e.state);
});
</script>
</html>
通过pushState方法，我们可以在不刷新页面的情况改变地址栏url，在改变的同时，我们在ajax获取数据，填充到面板上，这样，每一个页面都会有一个url地址，这样就可以被搜索引擎所搜索到了。
因为不适用#结构，所以每一个url都是一个请求，那么，在服务端我们需要设置这些请求返回的都是这样的页面才行
<html>
<body>
<ul id="nav">
<li><a href="#user">user</a></li>
<li><a href="#detail">detail</a></li>
</ul>
<div id="container">
</div>
</body>
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
