如何在 JSF 的回发中保持滚动位置？答案

【问题标题】：How can I maintain scroll position across postbacks in JSF?如何在 JSF 的回发中保持滚动位置？
【发布时间】：2008-10-29 17:52:33
【问题描述】：

我正在将 JSF 前端用于上传或删除图像的页面。单击上传或删除按钮会导致回发，并且页面会以更新的状态重新加载。但是，这会重置页面的滚动位置。我应该如何在回发操作中保留此页面的回滚。

【问题讨论】：

标签： jsf

【解决方案1】：

您可以使用 actionListener 来做到这一点。例如，在您的页面中（例如 page.jsf）：

<f:view>    
    <h:form>
        <h:commandLink actionListener="#{bean.method}">
            <h:outputText value="Submit" />
            <f:param name="anchor" value="image" />
        </h:commandLink>
    </h:form>
    <div id='result'>
        <h1><a name='image'>Image</a></h1>        
    </div>
</f:view>

托管 bean 看起来像：

public class Bean {

    public void method(ActionEvent actionEvent) {

        // Get parameter
        String ancla = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("anchor");

        try {
            FacesContext.getCurrentInstance().getExternalContext().redirect("page.jsf#" + anchor);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}

希望对你有帮助

【讨论】：

【解决方案2】：

如果您使用的是 Apache MyFaces Tomahawk，您可以设置参数 AUTOSCROLL，然后确保启用 AutoScrollPhaseListener。

我不确定这个功能是由 JSF 指定的，而是由 Apache MyFaces Tomahawk 额外实现的。

另外，请注意，在 1.1.6 版本之前，AUTOSCROLL 实现中存在跨站点脚本漏洞。

【讨论】：

【解决方案3】：

您可以使用 jquery.. 使用 cookie.. 在就绪函数中

    $(function(){

           //set window scroll position if cookie is set
       window.scroll(0,getCookie('myCookie'));
       //unset cookie after setting scroll position
       deleteCookie('myCookie'); 

       //make this class objects keep page scroll position
       jQuery(window).unload(function() {
        setCookie('myCookie', getPageScroll());
       });
        //-------------------



    });

在准备好的函数之后添加这个函数..

function setCookie(name,value) {

    var date = new Date();
    date.setTime(date.getTime()+(10*1000));
    var expires = "; expires="+date.toGMTString();
    document.cookie = name+"="+value+expires+"; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function deleteCookie(name) {
    setCookie(name,"",-1);
}

希望对你有所帮助..

【讨论】：