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

最新推荐文章于 2024-07-04 01:49:42 发布

转载最新推荐文章于 2024-07-04 01:49:42 发布 · 1.8k 阅读

文章标签：

#浏览器 #html5 #xmlhttprequest #function #firebug #ajax

HTML 专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何利用HTML5技术在不刷新页面的情况下修改浏览器url，包括使用JavaScript进行DOM操作、历史状态管理、AJAX请求以及浏览器兼容性处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>