跨浏览器 SmartNavigation 替代方案

• 下载源文件 - 12.6 Kb

引言

SmartNavigation 的一个特性是在较长的页面中保留滚动位置。但是，SmartNavigation 仅适用于 Internet Explorer。 另一个问题是，使用 SmartNavigation 可能会导致一些 JavaScript 错误。

作为一名 Web 开发人员，我需要保留较长页面中的滚动位置，以防止访问者在页面中迷失。

所以，我想出了一个跨浏览器的服务器控件的想法，以在回发中保持滚动位置。

使用代码

导入所需的程序集

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

该控件派生自基本 Control 类，以参与由页面框架提供的 HTTP 请求/响应处理。

namespace Uludag
{
public class Lili : Control {
    public Lili(){
    }

该控件覆盖继承的 Render 方法以写入输出文本流。

protected override void Render(HtmlTextWriter writer){

我的方法是在表单的 OnSubmit 事件中添加一个事件。 此事件将事件源的位置分配给隐藏值。 声明隐藏值

writer.Write("<input type=\"hidden\" id=\"" + 
       this.ID + "_OffsetY\" name=\"" + this.ID + "_OffsetY\" value=\"0\">\n");
writer.Write("<input type=\"hidden\" id=\"hidden\"" + 
       this.ID + "_OffsetX\" name=\"" + this.ID + "_OffsetX\" value=\"0\">\n");

然后检测用户浏览器。

writer.Write("<script language="\""Javascript\">\n");
writer.Write("var ua = navigator.userAgent.toLowerCase();\n"); 
writer.Write("var isIE = (ua.indexOf('msie') != -1 && 
       !this.isOpera && (ua.indexOf('webtv') == -1) );\n");

attachEvent 用于将指定的函数绑定到 Internet Explorer 中的事件。 对于其他浏览器，使用 addEventListener 。 定义 Internet Explorer 的 OnSubmit 事件的函数。

• window.event.offsetY 设置或检索鼠标指针相对于触发事件的对象的 y 坐标。
• window.event.clientY 设置或检索鼠标指针相对于窗口客户端区域（不包括窗口装饰和滚动条）的 y 坐标。
• window.event.offsetX 设置或检索鼠标指针相对于触发事件的对象的 x 坐标。
• window.event.clientX 设置或检索鼠标指针相对于窗口客户端区域（不包括窗口装饰和滚动条）的 x 坐标。

writer.Write("function " + this.ID + "_OnSubmitIE(){\n");
writer.Write("document.getElementById(\"" + this.ID  + 
   "_OffsetY\").value = window.event.offsetY - window.event.clientY + 2;\n");
writer.Write("document.getElementById(\"" + this.ID  + 
   "_OffsetX\").value = window.event.offsetX - window.event.clientX + 2 ;\n");
writer.Write("}\n");

定义 Internet Explorer 以外的浏览器的 OnSubmit 事件的函数。

• event.pageY 返回事件相对于可见页面的垂直坐标。
• event.clientY 返回事件栏的垂直位置。
• event.pageX 返回事件相对于页面的水平坐标。
• event.clientX 返回事件栏的水平位置。

writer.Write("function " + this.ID + "_OnSubmitNS(event){\n");
writer.Write("document.getElementById(\"" + this.ID  + 
     "_OffsetY\").value = event.pageY - event.clientY;\n");
writer.Write("document.getElementById(\"" + this.ID  + 
     "_OffsetX\").value = event.pageX - event.clientX;\n");
writer.Write("}\n");

将事件添加到表单

writer.Write("if (!isIE){\n");
writer.Write("document.forms[0].addEventListener('submit'," 
             + this.ID  + "_OnSubmitNS, false);\n");
writer.Write("}\n");        
writer.Write("else{\n");
writer.Write("document.forms[0].attachEvent('onsubmit'," + 
                            this.ID  + "_OnSubmitIE);\n");
writer.Write("}\n");

如果 PostBack，则添加一个 OnLoad 事件以滚动到事件源。

if (Page.IsPostBack ){
    writer.Write("function " + this.ID + "_OnLoad(){\n");
    writer.Write("window.scrollTo(" +  Page.Request.Form[this.ID + 
                 "_OffsetX"]+ "," + 
                 Page.Request.Form[this.ID + "_OffsetY"] + ");\n");
    writer.Write("}\n");
    writer.Write("if (!isIE){\n");
    writer.Write("window.addEventListener('load'," + 
                 this.ID  + "_OnLoad, false);\n");
    writer.Write("}\n");        
    writer.Write("else{\n");
    writer.Write("window.attachEvent('onload'," + this.ID  + "_OnLoad);\n");
    writer.Write("}\n");
}

结束脚本并呈现。 关闭括号。

writer.Write("</script>\n");
this.RenderChildren(writer);
}
}
}

我已经在使用 Internet Explorer 6.0、FireFox 1.0 和 Netscape 7.2 上测试过这个。

将此控件添加到 Visual Studio

要将此控件添加到 Visual Studio 上的工具箱，请右键单击工具箱，然后单击“添加/删除项”。

然后找到Lili.dll

确保选中了 Lili。

然后可以在您的工具箱中看到 Lili。

您所要做的就是将 Lili 拖放到您的页面上。

我希望这对某人有所帮助，我很乐意接收其他浏览器的任何错误修复、增强功能等。