1***@qq.com
1***@qq.com
  • 发布:2016-07-18 16:45
  • 更新:2016-07-19 09:57
  • 阅读:4881

关于返回键的问题,点击返回键就直接退出APP了

分类:HTML5+

随APP本身一起打包的页面,浏览的时候按返回键的能回退到上一页面。但是打开APP本身以外的页面后,按手机返回键就直接退出APP了。因为我做的APP链接了一些存放在服务器上的web页面,怎么样让浏览到那些页面的时候,按返回键也能回退到上一个页面,而非直接退出APP呢?

有没有大神详细说一下怎么做,我是一个新手!

2016-07-18 16:45 负责人:无 分享
已邀请:
赵梦欢

赵梦欢 - 专注前端,乐于分享!

至于思路而言,很简单,就是监听返回键或者说重写mui.back事件,然后通过WebviewObject对象的canBack和canForward方法可以查询Webview窗口的状态,通过back和forward控制页面加载。

可以通过plus.key.addEventListener来注册监听返回按键backbutton事件:

plus.key.addEventListener("backbutton",function(){  
    alert( "BackButton Key pressed!" );  
});

通过WebviewObject对象的canBack和canForward方法可以查询Webview窗口的状态,通过back和forward控制页面加载。

canBack: 查询Webview窗口是否可后退
canForward: 查询Webview窗口是否可前进
back: 后退到上次加载的页面
forward: 前进到上次加载的页面
clear清除原生窗口的内容,用于重置原生窗口加载的内容,清除其加载的历史记录等内容

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
</head>  
<body>  
    <script type="text/javascript" charset="utf-8">  
        var ws=null,nw=null,canback=null,canforward=null,i=0;  
        function plusReady(){  
            ws=plus.webview.currentWebview();  
            nw=plus.webview.create("http://weibo.com/dhnetwork");  
            ws.append(nw);  
            plus.key.addEventListener("backbutton",function(){  
                //查询Webview窗口是否可后退  
                nw.canBack( function(e){  
                    canback=e.canBack;  
                    console.log("canback:"+canback);  
                });  
                //查询Webview窗口是否可前进  
                nw.canForward( function(e){  
                    canforward=e.canForward;  
                    console.log("canforward:"+canforward);  
                });  
                //当进入以后的逻辑判断  
                if(canback){  
                    nw.back();  
                }else{  
                    if(canforward){  
                        exit();  
                        return;  
                    }else{  
                        i++;  
                        if(i>1){  
                            exit();  
                        }      
                    }  
                }  
            });  
        }  

        function exit(){  
            // 弹出提示信息对话框  
            plus.nativeUI.confirm( "您想要退出吗?", function(e){  
                if(e.index==0){  
                    plus.runtime.quit();  
                }  
            }, "您想要退出吗?", ["Yes","No"] );  
        }  

        if(window.plus){  
            plusReady();  
        }else{  
            document.addEventListener("plusready",plusReady,false);  
        }  
    </script>  
</body>  
</html>

详情可以参考:页面历史记录操作

  • 1***@qq.com (作者)

    是把这些代码写到一个单独的页面,然后再引入到其它所有页面吗?

    2016-07-19 09:46

1***@qq.com

1***@qq.com (作者)

已经解决了,谢谢啦

  • 8***@qq.com

    真么解决的?

    2019-05-09 16:17

  • luoping

    怎么弄的小白我完全看不懂,我也遇到了一样的问题,app是淘宝买的,有源码,当使用的时候有一点非常不方便,在APP里面添加的哦 网页按钮进去以后 点击home键不是返回上一步操作,而是直接退到首页了,

    2019-09-03 12:02

该问题目前已经被锁定, 无法添加新回复