riskers / blog

:pencil2: 博客写在 Issues 里
http://riskers.github.io/
MIT License
1.13k stars 96 forks source link

利用hash监听Android上的物理返回键 #3

Open riskers opened 8 years ago

riskers commented 8 years ago

我们都知道JS是没有办法监听到Android机上的物理返回键的,所以我们要"变通"地实现这个功能。

webview

在webview中实现这个功能比较简单,因为客户端是可以监听到返回键的,所以客户端只要给webview留一个接口就可以了。这是手机助手的监听物理返回键的接口:

/**
 * 截获物理返回键
 * setOnBackKeyDownListenner(int type);    void
 * type : 1 截获 0 释放
 *
 * 按下物理返回键触发事件
 * onBackKeyDown
 *  
 */

// 弹窗时
AndroidWebview.setOnBackKeyDownListenner(1);
showPopup();

// 按物理返回键时客户端回调页面函数
function onBackKeyDown(){
    // 释放物理返回键
    AndroidWebview.setOnBackKeyDownListenner(0);
    hidePopup();
}

开始监听

openPop事件执行的时候弹窗出现,然后开始监听物理返回键

window.openPop = function() {
    $('.mask').css('display','-webkit-box').addClass('js-close');
    AndroidWebview.setOnBackKeyDownListenner(1);
}

取消监听

onBackKeyDown是按下物理返回键触发的事件,可以看到按下返回键后执行closePop并且不再监听返回键

window.onBackKeyDown = function(){
    // 关闭弹窗
    window.closePop();
    // 释放物理返回键
    AndroidWebview.setOnBackKeyDownListenner(0);
}

可以看出来,webview下的监听物理返回键还算是"比较"简单的

浏览器中

看下面的案例,这个页面有4个子页面,这里用hash记录所处的页面,有这么几个好处:

  1. 利用hashchange的事件触发,可以记录页面状态。比如页面在#page2,这时候用户刷新了页面,页面还是会在page2
  2. 这是记录在history里的,也就是说按下浏览器的后退键或者手机的物理返回键是可以回退到上一个状态的,这样在回退的时候我们利用hashchange不是也就做到了"变相"地监听了返回键么?

向我捐助 | 关于我 | 工作机会