HTML5无刷新修改URL

JavaScript 2013-03-20 html5,pushState,replaceState

HTML5新添加了两个api分别是pushState和replaceState,DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,可以在用户的访问记录中前进和后退,我们可以开始操作这个历史记录堆栈。

实例一、通过pushState修改URL

DEMO http://www.qttc.net/static/demo/html5_20130320/test.html

通过这句代码可以无刷新改变URL

window.history.pushState({},0,url);

DEMO代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>HTML5无刷修改url - 琼台博客</title>
		<script type="text/javascript">
			function changeURL(){
				var url = document.getElementById('url').value;
				window.history.pushState({},0,'http://'+window.location.host+'/'+url);		
			}

		</script>	
	</head>
	<body>
		<h1>html5无刷新改变url</h1>
		<div id="info" style="margin:30px 0;">
			页面真实地址:
			<span style="color:red;"><script type="text/javascript">document.write(window.location.href);</script></span>
		</div>
		<div>
		请输入要改变地URL字符串:<input id='url' type="text" />
		<button onclick="changeURL();">点击无刷改变url</button>
		</div>
		<div style="color:red;margin-top:30px;">请使用支持html5的浏览器访问</div>
		<div style="margin-top:30px;"><a href="http://www.qttc.net/201303292.html" target="_blank">《html5无刷新改变URL》</a> - 琼台博客</div>
	</body>

</html>

截图:

在input输入框内输入haha.html点击“点击无刷新改变url”按钮即可实现

实例二、利用ajax配合pushState翻页无刷新的动作

主要在ajax发起数据请求,在数据页面响应后利用pushState修改分页参数,达到模拟真实翻页效果,并且写入历史表达到后退时能恢复上一页的数据

DEMO http://www.qttc.net/static/demo/html5_20130320/demo-page.html

demo-page.html代码:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8" />
	<title>HTML5无刷修改url - 琼台博客</title>
	<script type="text/javascript">
	var changeURL = function(){
		
		if(location.href.indexOf("?") > -1){
			var arr = location.href.split('?');
			var urlbase = arr[0];
			var pageObj = arr[1].match(/page=(\d+)/);
			var page = Number(pageObj[1]) || 1;
		}else{
			var urlbase = location.href;
			var page = 1;
		}

		load = false;
		var content = document.getElementById("content");	
		var ajax = new XMLHttpRequest();

		// 调用数据回掉函数
		var ajaxCallback = function(){
			if(ajax.readyState == 4){
				load = false;
				result = eval('('+ajax.responseText+')');
				content.innerHTML = result.data;
				next.href = urlbase + "?page=" + (page + 1);

				// push到历史记录里,可以在点击后退时从历史记录里恢复内容
				// 并且无刷修改url地址
				window.history.pushState({content:content.innerHTML,page:page},page,urlbase + "?page=" + page);
			}
		};

		// 点击事件
		document.getElementById('next').onclick = function(event){
			if(!load){
				load = true;
				content.innerHTML = '加载中数据中...(注意看数据返回后url改变)';
				page++;
				ajax.open('GET','shuju.php?page='+page, true);
				ajax.onreadystatechange = ajaxCallback;
				ajax.send('');
				return false;
			}
		};


		// 记录到历史里,当点击后退按钮还退回上次页面请求前的页面内容
		window.onpopstate = function(){
			content.innerHTML = history.state.content;
			page = history.state.page;				
		}

		// 修改当前页面在 history 中的记录
		window.history.replaceState({content:content.innerHTML,page:page},page,urlbase + (page > 1 ? '?page=' + page : '' ));
	};

	// 检测是否支持
	try{
		//监听事件
		window.addEventListener('DOMContentLoaded', changeURL, false);
	}catch(e){
		alert('浏览器不支持,请使用支持html5的浏览器');	
	}

	</script>
	</head>
	<body>
		<div id="content" style="width:300px;height:100px;border:1px solid #999;">第1页的内容</div>
		<div><a id="next" href="?page=2">下一页</a></div>
		
		<div style="color:red; margin-top:30px;">请使用支持html5的浏览器测试</div>
		<div><a href="http://www.qttc.net">xxx</a></div>
	</body>
</html>

shuju.php代码:

<?php
sleep(3);
echo json_encode(array('data'=>'第'.$_GET['page'].'内容'));

DEMO贴图:

没有点击之前

点击后,发起ajax请求page=2数据

ajax返回后通过pushState修改URL,请看截图地址栏已经是page=2,页面没有刷新,因为firebug控制台中的ajax请求记录还在

点击后退箭头,恢复上一页的数据

最后

虽说这两个html5新加api能实现无刷新修改URL,但js毕竟是前端,为了安全是不能跨域的。比如本例中的demo域是在www.qttc.net下,不能修改到www.xxx.com域下。有不少人说这个特性解决了ajax局部刷新区域不容易被蜘蛛人抓取的问题,本人没有亲自验证,但却有可行之势,感兴趣的童鞋可以尝试下。

 

 

 

文字链接:《HTML5无刷新修改URL

文章地址:http://www.qttc.net/201303292.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 9

  • 2015-09-26 18:31:20 [ 跟帖 ]
    1 #
  • 2015-09-26 18:01:20 [ 跟帖 ]
    2 #
  • 需求来了,我们老大需要我获取URL做一个chrome的 extension,看了你的博客受益匪浅,但有了域的限制(比如:我亲试了在本地的html,发现并不好用),还望多多指教,感恩!
    2015-02-10 11:13:29 [ 跟帖 ]
    在网站上好用但在本地不好用的原因:是不是由于打开的html文件是本地文件,而不是网络url所致--接触web编程阶
    2015-02-10 13:44:03 [ 跟帖 ]
    这是基于HTTP协议的API,你本地打开是file:///,是文件协议
    2015-02-10 15:30:47 [ 跟帖 ]
    3 #
  • 对了,顺便添加俺为友情链接呗 忙碌的松鼠 http://www.gretheer.com
    2013-06-09 12:01:21 [ 跟帖 ]
    4 #
  • 老大,给你博客添加个回到顶部功能吧,这么长,还得滑上去。
    2013-06-09 11:59:10 [ 跟帖 ]
    5 #
  • 可以山寨个支付宝。然后无刷新更改URL为http://www.alipay.com 是可以这样么?
    2013-03-31 08:13:17 [ 跟帖 ]
    按 CTRL+ Home 回到顶部呀
    2016-10-12 14:12:58 [ 跟帖 ]
    6 #
  • 终于写了一篇哈,我那次咨询过你之后,在网上查阅了很多资料。发现现在的这些效果,有些使用 # 来实现无刷新,这个我在 IE7 等早期浏览器下测试,也是支持的。例如这个 http://emploinewyork.com 网站。阮一峰写过一篇简要介绍的文章:http://www.ruanyifeng.com/blog/2011/03/url_hash.html。
    2013-03-22 23:27:40 [ 跟帖 ]
    7 #