解析 Page.MaintainScrollPositionOnPostBack 属性

ASP.NET 的页面执行 PostBack 动作时,页面由伺服端重新传给客户端,而页面的垂直滚动条会跳回最上方,水平滚动条会跳回最左方。
 为了解决此情形,只要将 Page 的MaintainScrollPositionOnPostBack 属性设为True 时,页面就会自动维护滚动条位置,它是如何实现这个动作的呢?
 
当把 Page.MaintainScrollPositionOnPostBack = "True" 时,检视 HTML 原始码,可以发现它多了"__SCROLLPOSITIONX" 及"__SCROLLPOSITIONY" 这二个 HiddenField,这二个 HiddenField 主要是要来记录页面滚动条的水平及垂直位置。
 
    <input type="hidden" name="__SCROLLPOSITIONX" id="__SCROLLPOSITIONX" value="0" />
     <input type="hidden" name="__SCROLLPOSITIONY" id="__SCROLLPOSITIONY" value="204" />
 
页面上也会多了以下这些JavaScript 程序代码,它主要是透过WebForm_SaveScrollPositionSubmit 及WebForm_RestoreScrollPosition 这二个函式来维护页面滚动条位置。
 

 1<script type="text/javascript">
  2<!--
  3theForm.oldSubmit = theForm.submit;
  4theForm.submit = WebForm_SaveScrollPositionSubmit;
  5
  6theForm.oldOnSubmit = theForm.onsubmit;
  7theForm.onsubmit = WebForm_SaveScrollPositionOnSubmit;
  8
  9theForm.oldOnLoad = window.onload;
 10window.onload = WebForm_RestoreScrollPosition;
 11// -->
 12</script>
 

当页面Submit 时会利用WebForm_SaveScrollPositionSubmit 函式来记录页面目前的水平及垂直滚动条位置,将水平滚动条位置记录于"__SCROLLPOSITIONX" 这个 HiddenField,垂直滚动条位置记录于"__SCROLLPOSITIONY" 这个 HiddenField。
 
而 PostBack 后页面重新加载后,会利用WebForm_RestoreScrollPosition 函式来回复页面滚动条位置,也就是将记录在"__SCROLLPOSITIONX" 及"__SCROLLPOSITIONY" 这二个 HiddenField 的值,重新设定页面的水平及垂直滚动条位置,如此就达到维护页面滚动条位置的动作了。

 

===========================================

 

function WebForm_GetScrollX() {
    if (__nonMSDOMBrowser) {
        return window.pageXOffset;
    }
    else {
        if (document.documentElement && document.documentElement.scrollLeft) {
            return document.documentElement.scrollLeft;
        }
        else if (document.body) {
            return document.body.scrollLeft;
        }
    }
    return 0;
}
function WebForm_GetScrollY() {
    if (__nonMSDOMBrowser) {
        return window.pageYOffset;
    }
    else {
        if (document.documentElement && document.documentElement.scrollTop) {
            return document.documentElement.scrollTop;
        }
        else if (document.body) {
            return document.body.scrollTop;
        }
    }
    return 0;
}
function WebForm_SaveScrollPositionSubmit() {
    if (__nonMSDOMBrowser) {
        theForm.elements['__SCROLLPOSITIONY'].value = window.pageYOffset;
        theForm.elements['__SCROLLPOSITIONX'].value = window.pageXOffset;
    }
    else {
        theForm.__SCROLLPOSITIONX.value = WebForm_GetScrollX();
        theForm.__SCROLLPOSITIONY.value = WebForm_GetScrollY();
    }
    if ((typeof(this.oldSubmit) != "undefined") && (this.oldSubmit != null)) {
        return this.oldSubmit();
    }
    return true;
}
function WebForm_SaveScrollPositionOnSubmit() {
    theForm.__SCROLLPOSITIONX.value = WebForm_GetScrollX();
    theForm.__SCROLLPOSITIONY.value = WebForm_GetScrollY();
    if ((typeof(this.oldOnSubmit) != "undefined") && (this.oldOnSubmit != null)) {
        return this.oldOnSubmit();
    }
    return true;
}
function WebForm_RestoreScrollPosition() {
    if (__nonMSDOMBrowser) {
        window.scrollTo(theForm.elements['__SCROLLPOSITIONX'].value, theForm.elements['__SCROLLPOSITIONY'].value);
    }
    else {
        window.scrollTo(theForm.__SCROLLPOSITIONX.value, theForm.__SCROLLPOSITIONY.value);
    }
    if ((typeof(theForm.oldOnLoad) != "undefined") && (theForm.oldOnLoad != null)) {
        return theForm.oldOnLoad();
    }
    return true;
}

 

=====================

http://msdn.microsoft.com/zh-tw/library/system.web.ui.page.pagestatepersister(v=vs.80).aspx

http://www.cnblogs.com/jeff377/archive/2008/01/17/1042228.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值