刷新后保持页面滚动条位置(ASP.NET VS Javascript)

最新推荐文章于 2022-09-29 16:08:15 发布

Lwmjm

最新推荐文章于 2022-09-29 16:08:15 发布

阅读量1.1k

点赞数

分类专栏： JS .NET 文章标签： javascript asp.net postback 脚本 xhtml html

.NET 同时被 2 个专栏收录

12 篇文章

订阅专栏

2 篇文章

订阅专栏

刷新后保持页面滚动条位置(ASP.NET VS Javascript)

在一个很长的列表中进行操作，当用户触发PostBack事件的时候，需要保持滚动条所在位置。搜索了一下，发现有两种方法可以实现。第一种，在msdn中找到的，设置Page的SmartNavigation（智能导航）属性为True。原文的备注是这样说的：

在大多数情况下不要在代码中设置该属性。在 .aspx 文件的 @ Page 指令中将 SmartNavigation 属性设置为 true。请求该页时，动态生成的类将设置该属性。

Internet Explorer 5.5 或更高版本浏览器请求页时（或稍后），智能导航将通过执行下列功能提高用户对该页的操作能力：

消除导航导致的闪烁。
从一页移动到另一页时保持滚动位置。
保持导航之间的元素焦点。
在浏览器的历史记录中只保留最后一页的状态。

智能导航最适用于需要频繁回发但是其可是内容在返回时不会发生显著更改的 ASP.NET 页。在决定是否将该属性设置为 true时，请仔细考虑这一点。

对aspx页面来说，真的是很简单，只需要在页面头的@ Page后面多加一个SmartNavigation="True"就ok了，经简单的测试，没有问题，显示效果良好。但实际应用中却发现了问题。报告有 js脚本错误，无论如何也保持不了滚动条的状态。经分析，发现是该页面调用了ascx（Custom Control）的缘故，且拉长页面的也正是拜ascx控件所赐。于是乎，考虑将SmartNavigation="True"添加到ascx页面中。结果，失败！ascx不支持@Page指令！虽说ascx也是一个页面，但和aspx还是有区别的。看来这种方法是解决不了这个问题的，只得令寻他法。

经再次搜索，发现有人用js脚本写过这个方法（感谢宝玉提供的js）。js是在客户端运行的，只要我的aspx页面能解析到客户端，不都是html文件么，从理论上说，用js的方法是可以实现的。于是马上动手试验，结果，成功！虽然当页面内容很多的时候有一个稍微明显的闪动，但滚动条可以保持在 PostBack前的位置，与需求相符，问题解决。

ps：另附js脚本

<!--

// 获取当前文件名

function getFileName()

{

var url = this.location.href;

var pos = url.lastIndexOf("/");

if(pos == -1)

pos = url.lastIndexOf("\\");

var filename = url.substr(pos+1);

return filename;

}

function fnLoad()

{

with(window.document.body)

{

addBehavior ("#default#userData"); // 使得body元素可以支持userdate

load("scrollState" + getFileName()); // 获取以前保存在userdate中的状态

if (sFirstEnter=="0")

{

scrollLeft = getAttribute("scrollLeft"); // 滚动条左位置

scrollTop = getAttribute("scrollTop");

}

function fnUnload()

{

with(window.document.body)

{

setAttribute("scrollLeft",scrollLeft);

setAttribute("scrollTop",scrollTop);

save("scrollState" + getFileName());

// 防止受其他文件的userdate数据影响，所以将文件名加上了

// userdate里的数据是不能跨目录访问的

}

window.on load = fnLoad;

window.on unload = fnUnload;

// -->

</script>

通过对js函数的研究发现，只要具有scroll属性的html控件，都可以用这个方法来实现页面刷新后的滚动条的定位。当然，函数是要做一下改动。把 with（window.document.body）中的body改为其他控件的ID就可以了： with（window.document.all["控件ID"]）

经测试，通过！

有的页面是因为使用了Ajax中的timer控件，造成滚动条不稳定，可以改为js的时间，下边是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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript在线时钟,时间</title>
<script type="text/javascript">
function tim(){
 var now=new Date;  
 this.year = now.getFullYear();
 this.tmonth = now.getMonth() + 1;
 this.tday = now.getDate();
 this.week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[now.getDay()];
 this.month = tmonth < 10 ? "0" + tmonth : tmonth;
 this.day = tday < 10 ? "0" + tday : tday;  
 this.hour = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
 this.minute = now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
 this.second = now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds(); 
 document.getElementById("timespan").innerHTML="今天是"+year+"年"+month+"月"+day+"日,"+hour+":"+minute+":"+second+","+week;
 var mm=setTimeout("tim()","1000");
}
</script>
</head>
<body onLoad="tim()">
<span id="timespan"></span>
</body>
</html>