Android web视图“后退”按钮加载以前加载的div

时间:2013-12-16 19:37:24

标签: android jquery webview back

我会尽可能清楚地解释这一点。我有一个使用Web视图的Android应用程序基本上加载一个网页作为我的应用程序。我的一切都很好,但后退按钮似乎是一个问题。我已经在一个html页面上设置了这个页面,当点击某些按钮时,它会加载到div中以给出新页面的感觉,而不是实际拥有一个。我基本上想要后退按钮(在Android平板电脑或智能手机上)加载以前加载的div,但我不知道从哪里开始。这是内容切换jquery的样子 -

function contentSwitcher(settings){         var settings = {            contentClass:'。contentToLoad',            navigationId:'#sideMenu',            servFront:'#clickHomeHome'

   };
     //Hide all of the content except the first one on the nav
    $(settings.contentClass).not(':first').hide();
    $(settings.navigationId).find('li:first').addClass('active');

    //onClick set the active state, 
    //hide the content panels and show the correct one
    $(settings.navigationId).find('a').click(function(e){
        var contentToShow = $(this).attr('href');
        contentToShow = $(contentToShow);
        //dissable normal link behaviour
        e.preventDefault();
        //set the proper active class for active state css
        $(settings.navigationId).find('li').removeClass('active');
        $(this).parent('li').addClass('active');
        //hide the old content and show the new
        $(settings.contentClass).hide();
        contentToShow.show("slow");
     });
}   

contentSwitcher(); });

注意:我已经裁掉了一大堆,只是为了展示它在基本级别上是如何工作的。

有没有人对从哪里开始有任何建议。我只是喜欢后退按钮功能,可以检查存储在某处的已启动的前一个div名称并加载它。

谢谢!

1 个答案:

答案 0 :(得分:1)

您可以尝试使用History API。网上有很多教程,例如这个很好:

http://diveintohtml5.info/history.html

基本上这就是它的工作原理。当用户单击div的链接以显示您将状态推送到历史堆栈时。

 history.pushState({<object with any information about state>}, pageTitle, newUrl);

这会将状态推送到历史堆栈,这意味着当用户按下任何现代浏览器(例如webkit)上的后退按钮时,它将考虑该状态。当执行后退操作时,它将从历史堆栈中弹出状态。这个动作你必须以你认为合适的任何方式倾听和处理:

window.addEventListener("popstate", function(event) {
    // event object contains the information from the pushed state
    // do whatever needed to load the previous page here
});

历史记录API要求您以某种方式构建代码,以使其正常运行。为此,我建议使用一些现有的框架为您处理事件,例如Backbone.js的。希望这可以帮助。