作者：手机用户2702935421_666 | 来源：互联网 | 2023-05-19 16:38
<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.cna>
p>
body>
html>
京公网安备 11010802041100号