HTML5可通过history.pushState修改网页的URL地址，在配合相关代码显示隐藏相应界面便可以实现单页面多界面相互操作。该方法比直接访问URL地址速度快，执行效率高，UI体验好，但会增加页面的复杂性及耦合性，要视实际情况而定，一般都用在dialog弹出框上。
实例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5刷新</title>
<meta name="full-screen" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="margin: 0;padding: 0;">
<button>弹出框</button>
<div class="dialog" style="width: 100%;height: 100%;position: absolute;background-color: red;display: none;top:0;">新页面</div>
</body>
<script src="http://www.zeptojs.cn/zepto.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
//html5 无刷新修改URL pushState 重复地址会添加到历史页面 replaceState 重复地址不会添加到历史页面
history.pushState("","",window.location.href+"#dialog");
$(".dialog").show();
})
//刷新监听
window.onload = function(){
if(window.location.href.indexOf("dialog") != -1)
history.go(-1);
}
//浏览器回退监听
window.onpopstate = function () {
if($(".dialog").css("display")!="none")
$(".dialog").hide();
}
})
</script>
</html>
