它的用法在官方网站上已经给出
官方示例(服务器端)
http://quickstarts.asp.net/Futures/ajax/samples/history1.aspx
官居方源代码
http://quickstarts.asp.net/Futures/util/srcview.aspx?path=~/ajax/samples/history1.src
官居方示例(客户端使用,但仍未脱离Microsoft ASP.NET Futures)
http://quickstarts.asp.net/Futures/ajax/samples/history2.aspx
源代码
http://quickstarts.asp.net/Futures/util/srcview.aspx?path=~/ajax/samples/history2.src
其 实上面代码引用的是PreviewScript.js文件,这个可以在X\Program Files\Microsoft ASP.NET\ASP.NET Futures July 2007\v1.2.61025\ScriptLibrary\Microsoft.Web.Preview\1.2.61025.0中找到
在客户端使用它是最理想的情况,可且的确,用它自给的PreviewScript.js(145K)文件也是有点过大了
所以经过精简,我得到了一个小的精简版本,未压缩的情况下只有16K,压缩后估计在3K上下
http://dl2.csdn.net/down4/20070919/19082247681.js
但发现此版本在FF下工作正常,而IE下却有问题,经过反复研究,发现IE下必须添加一个Iframe来保存历史记录
于是有了以下Js段
function isIE(){ //ie?
if (window.navigator.userAgent.indexOf("MSIE")>=1)
return true;
else
return false;
}
if (window.navigator.userAgent.indexOf("MSIE")>=1)
return true;
else
return false;
}
function InitHistory(){
if(isIE){//Ie的情况下,要通过iframe来完成
var i = document.createElement("<iframe id="__historyFrame" style='display:none;' src='/Template/History.htm' scrolling='no' frameborder='0' />");
var d=$get("extendDiv6");
d.innerHTML=i;
}
Sys.Application.add_init(function() {
var h = Sys.Application.get_history();
h.setServerId("History1", "History1");
})
}
if(isIE){//Ie的情况下,要通过iframe来完成
var i = document.createElement("<iframe id="__historyFrame" style='display:none;' src='/Template/History.htm' scrolling='no' frameborder='0' />");
var d=$get("extendDiv6");
d.innerHTML=i;
}
Sys.Application.add_init(function() {
var h = Sys.Application.get_history();
h.setServerId("History1", "History1");
})
}
动态添加一个iframe(注意ID一定是__historyFrame)
下面是页面完整代码 basic.js即为上面两段代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script type="text/javascript">
function pageLoad() {
$addHandler($get("clientButton1"), "click", clientClick);
$addHandler($get("clientButton2"), "click", clientClick);
}
function pageNavigate(sender, args) {
var val = args.get_state().pageClientState || 0;
$get("div2").innerHTML = val;
}
function clientClick(e) {
var val = parseInt(e.target.value);
$get("div2").innerHTML = val;
Sys.Application.get_history().addHistoryPoint({pageClientState: val});
}
</script>
</head>
<body>
<script type="text/javascript" src="JavaScript/MicrosoftAjax.js"></script>
<script type="text/javascript" src="JavaScript/Basic.js"></script>
<script type="text/javascript" src="JavaScript/Preview/history.js"></script>
<div id="div2"></div>
<form id="form1">
<a href="#123" id="permalink">Permalink</a>
<input id="clientButton1" type="button" value="1" />
<input id="clientButton2" type="button" value="2" />
<div id="extendDiv6" style="display:none"></div>
</form>
<script type="text/javascript">
InitHistory();
</script>
</body>
</html>
注:History 还不支持Opera希望在下一版本中可以支持
http://blog.csdn.net/chsword/archive/2007/09/19/1790664.aspx