嘛，起因是黑子大叔在微博上的一条@信息，找起了这个的实现，看了一圈google的中文信息内似乎还没有怎么提到这个的内容，就发表上来。

详细效果就是类似于用Firefox4+/Chrome 5+/Safari 5+/Opera 11.5+登录新浪微博后看到的个人时间轴，在翻页时可以观察到这个效果，地址栏URL变动，但是页面没有刷新，用firebug观察也观察不到刷新整个页面，只有ajax请求的翻页数据。从先前的理解来说，URL的修改必然引起（请注意我不是在说通过锚点修改）浏览器重载页面，但利用HTML5新加入的history.pushState();和history.replaceState();可以完全自己维护一个历史记录列表绕开历史记录完全由浏览器控制的机制，从而实现比锚点更加完美的一种页内更新的体验。

代码方面很简单，只要在需要修改url的地方插入一行：

window.history.pushState({"html":response.html,"pageTitle":response.pageTitle}, 'title', urlPath);

//三个参数，分别为：状态对象，标题（目前被浏览器忽略），地址

即可在历史记录里面产生一个新的历史记录（另一个replaceState方法参数完全相同，只是替代掉当前的状态）。
在体验上，非常接近于使用锚点（window.location = “#foo”;），但是mozilla的文档提出了以下三点好处：

  • 新的URL可以是和原始页面URL同域下的任何URL，如果用锚点，只能更新#后面的部分
  • 仅在需要时更新URL，锚点的历史记录在相同时不会创建（即当前已经是”#foo”的情况下，如果再将当前页面锚点设置为”#foo”，不会产生新的历史记录）
  • 可以记录下任意类型的数据，使用锚点的话将要自己维护一份历史数据列表或者把数据转码到一个字符串里

（翻译&描述的有点别扭，见笑了，不过其实应该自己也能体会到这些好处才是）

我自己实现的一个例子：
http://vifix.cn/atelier/demos/html5-update-browser-url-without-reloading-page

代码：

<?php

if(!isset($_REQUEST['page'])){

	$page = 1;

}

else{

	$page = intval($_REQUEST['page']);

}

 

if(isset($_REQUEST['ajaxload'])){

	echo "第{$page}页的内容";

	die;

}

?>

<!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 = <?php echo $page;?>;

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

		<?php echo "第{$page}页的内容";?>

	</p>

	<p>

		<a id="next" href="?page=<?php echo $page+1;?>">下一页</a>

	</p>

	<div id="loading" style="display:none;">

		加载中

	</div>

</body>

</html>

mozilla的文档
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

stackoverflow上的相关问题：
http://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-page
http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page

http://vifix.cn/blog/html5-modify-browser-url-without-reloading-page.html

HTML5 修改浏览器url而不刷新页面的更多相关文章

  1. 使用 JavaScript 修改浏览器 URL 地址栏

    现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不 ...

  2. 使用JavaScript修改浏览器URL地址栏的实现代码【转】

    引用自http://www.jb51.net/article/42240.htm 现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起 ...

  3. 使用JavaScript 修改浏览器 URL 地址栏

    现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不 ...

  4. 使用JavaScript修改浏览器URL地址栏的实现代码

    现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不 ...

  5. 是不是content-type: text/html的数据包一到，浏览器就肯定刷新页面？

    整理自:http://q.cnblogs.com/q/54726/ 是不是content-type: text/html的数据包一到,浏览器就肯定刷新页面? 或者说,浏览器收到的状态正常的conten ...

  6. mui 从列表进入到详情，再返回，列表页还是进入列表之前的样子，而不刷新页面

    mui 从列表进入到详情,再返回,列表页还是进入列表之前的样子,而不刷新页面

  7. Python+Selenium自动化-设置浏览器大小、刷新页面、前进和后退

    Python+Selenium自动化-设置浏览器大小.刷新页面.前进和后退   1.设置浏览器大小 maximize_window():设置浏览器大小为全屏 set_window_size(500,5 ...

  8. 利用javascript Location访问Url,重定向,刷新页面

    网上转来了, 方便以后查询参考 本文介绍怎么使用javascript Location对象读和修改Url.怎么重载或刷新页面.javascript提供了许多方法访问,修改当前用户在浏览器中访问的url ...

  9. HTML5 History对象，Javascript修改地址栏而不刷新页面

    一.History对象 History 对象包含用户(在浏览器窗口中)访问过的 URL. History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问. ...

随机推荐

  1. Cocos2d-android (04) 执行多个动作

    先后.同时执行多个动作及动作序列执行结束后的事件 import org.cocos2d.actions.instant.CCCallFunc; import org.cocos2d.actions.i ...

  2. php 开发最好的ide: PhpStorm

    PhpStorm 跨平台. 对PHP支持refactor功能. 自动生成phpdoc的注释,非常方便进行大型编程. 内置支持Zencode. 生成类的继承关系图,如果有一个类,多次继承之后,可以通过这 ...

  3. HP ILO2 使用详细教程

    iLO是Intergrated Light-Out的缩写,是惠普特有的远程管理功能,目前最新的版本是iLO2.通过iLO2可以实现硬件级别的服务器远程管理,包括开关机.重启.服务器状态的监控.虚拟KV ...

  4. 深入理解PHP Opcode缓存原理

    什么是opcode缓存? 当解释器完成对脚本代码的分析后,便将它们生成可以直接运行的中间代码,也称为操作码(Operate Code,opcode).Opcode cache的目地是避免重复编译,减少 ...

  5. 应用引擎BAE3.0（转）

    add by zhj: 其实我主要是想看看基于docker的PaaS的特性. 原文:http://developer.baidu.com/wiki/index.php?title=docs/cplat ...

  6. jBox使用方法

    1.引入jquery文件 2.引入css和jBox文件 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...

  7. CSS 居中大全

    <center> text-align:center 在父容器里水平居中 inline 文字,或 inline 元素 vertical-align:middle 垂直居中 inline 文 ...

  8. HDU 5821 Ball (排序)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5821 有n个盒子,每个盒子最多装一个球. 现在进行m次操作,每次操作可以将l到r之间盒子的球任意交换. ...

  9. C语言的struct/union字节对齐

    C语言的一大优势就是对内存空间的控制,当然,一般情况下对于开发人员来说都是透明的.看一个始终困扰初学者的问题:字节对齐! 先看四个重要的基本概念:1.数据类型自身的对齐值:对于char型数据,其自身对 ...

  10. box-shadow 同时有内阴影和外发光效果

    box-shadow: 0px 0px 10px rgba(0,0,0,0.8) inset,0px 0px 5px rgba(200,200,200,0.5);