zoukankan      html  css  js  c++  java
  • Microsoft ASP.NET Futures (July 2007)中History在客户端的使用(即不必安装ASP.NET Futures)

    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段
    function isIE(){ //ie? 
        if (window.navigator.userAgent.indexOf("MSIE")>=1
            
    return true
        
    else 
            
    return false
    }
    这是来判断是否是IE
    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");
        })
    }

    动态添加一个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">
    <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

  • 相关阅读:
    在中文SPS中去掉左上角的“帮助”
    如何将英文SPS站点迁移到中文SPS下?
    Pivot View问题???
    PostgreSQL
    一个简单的全选Jquery插件
    JavaScript 分页控件的实现
    EXTJS新的创建方式
    通用垂直居中方法兼容各浏览器改进
    对Excel中的工作表进行排序的VBA(备份一下)
    关于meta标签(力求“大全”)
  • 原文地址:https://www.cnblogs.com/chsword/p/897929.html
Copyright © 2011-2022 走看看