如何在JSF中保留回发的滚动位置？

I am using JSF frontend for a page where an image is uploaded or deleted. Clicking on the upload or delete button causes a postback and the page to reload with the updated status. This however, resets the scroll position of the page. How should I go about retaining the scrollback of this page on the postback actions.

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

3 个解决方案

#1

You can do that with an actionListener. For example, in your page (page.jsf for example):

你可以使用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>

And the managed bean looks like:

托管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();
        }
    }

}

Hope this helps

希望这可以帮助

#2

If you are using Apache MyFaces Tomahawk, you can set the parameter AUTOSCROLL then make sure AutoScrollPhaseListener is enabled.

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

I'm not sure this functionality is specified by JSF, but instead is something extra implemented by Apache MyFaces Tomahawk.

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

Also, be aware that prior to version 1.1.6, there is a cross-site scripting vulnerability in the AUTOSCROLL implementation.

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

#3

you can use jquery.. Using cookies.. in ready function

你可以使用jquery ..使用cookies ..在准备好的功能

    $(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());
       });
        //-------------------



    });

after ready function add this functions..

准备好功能后添加此功能..

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);
}

i wish this help you..

我希望这能帮到你..

#1