您的位置：首页 > Web前端 > HTML5

HTML5，修改浏览器地址栏的URIL而不刷新页面代码

2012-07-04 23:15 218 查看

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML5 修改浏览器url而不刷新页面</title>
<script type="text/javascript">
var domLoaded = function(){
if(ua != null && ua[1] < 10){
alert('您的浏览器不支持');
return ;
}

if(location.href.indexOf("?") > -1){
var urlparts = location.href.match(/(.+?)\?.+/i);
var urlbase = urlparts[1];
}
else{
var urlbase = location.href;
}
var page = 58;
var ua = window.navigator.userAgent.match(/msie (\d\.\d)/i);
var content = document.getElementById("content");
var loading = document.getElementById("loading");

window.history.replaceState(
{
content:content.innerHTML,
page:page
},
page,
urlbase + (page > 1 ? '?page=' + page : '' )
);

var ajax = new XMLHttpRequest();
var ajaxCallback = function(){
if(ajax.readyState == 4){
loading.style.display = 'none';
content.innerHTML = ajax.responseText;
window.history.pushState(
{
content:content.innerHTML,
page:page
},
page,
urlbase + "?page=" + page
);
next.href = urlbase + "?page=" + (page + 1);
}
};

var next = document.getElementById('next');
var nextClickEvent = function(event){
if(loading.style.display != 'block'){
loading.style.display = 'block';
page++;
ajax.open('GET', urlbase + '?page=' + page + '&ajaxload=on', true);
ajax.onreadystatechange = ajaxCallback;
ajax.send('');
event.preventDefault();
}
};
next.addEventListener('click', nextClickEvent, false);

var popstate = function(){
content.innerHTML = history.state.content;
page = history.state.page;
};
window.addEventListener('popstate', popstate, false);
};

try{
window.addEventListener('DOMContentLoaded', domLoaded, false);
}
catch(e){
alert('您的浏览器不支持');
}
</script>
</head>
<body>
<p id="content">
第58页的内容	</p>
<p>
<a id="next" href="?page=59">下一页</a>
</p>
<div id="loading" style="display:none;">
加载中
</div>
<p>
支持浏览器：
<ul>
<li>firefox 4+</li>
<li>chrome 5+</li>
<li>safari 5+</li>
<li>opera 11.5+</li>
<li>internet explorer 10 pp3+</li>
</ul>
</p>
<p>
可以看到，这个功能的实现也需要通过服务器的rewrite，开发框架的URL Router，或者通过后台脚本GET参数进行控制来配合好，这样才不会导致整个程序出错
</p>
<p>
<em>建议打开firebug，并观察地址栏和ajax请求的返回内容</em>
</p>
<p>
<a href="http://vifix.cn">vifix.cn</a>
</p>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航