Microsoft ASP.NET Futures (July 2007)中有一个新的控件 “History”可以在Ajax中使用浏览器上的前进、后退按钮,但我们的主机上有时不必因为这一个功能就安一个Microsoft ASP.NET Futures，它版本更新很快，而且有时候，服务器提供者也未必愿意进行安装，而开发者又想有让用户有更好体验，那怎么办呢，我们先从基本的使用入手 ，我们再一步步将其提取为客户端可以使用的代码
它的用法在官方网站上已经给出
官方示例（服务器端）
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段
这是来判断是否是IE
动态添加一个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 >
这样就可以实现在Ajax里使用前进后退按钮而不必安装Microsoft ASP.NET Futures也能用History了
注：History 还不支持Opera希望在下一版本中可以支持
http://blog.csdn.net/chsword/archive/2007/09/19/1790664.aspx
它的用法在官方网站上已经给出
官方示例（服务器端）
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
