H5监听移动端物理/浏览器返回键

JavaScript没有监听物理返回键的API，所以只能使用 popstate 事件监听。

工具类如下：

export function handleBrowserGoBack(back){
  console.log("back");
  pushHistory();
  addPopstateListener(back);
}

向历史记录中插入了当前页

/**
 * 向历史记录中插入了当前页
 */
function pushHistory() {
    let hash = location.hash;
    let state = {
        title: "title",
        url: hash
   };
    window.history.pushState(state, "title", hash);
}

添加popstate监听

/**
 * 添加popstate监听
 */
function addPopstateListener(back){
 if(window.addEventListener){
        window.addEventListener("popstate",back, true);
   }else{
        window.attachEvent("popstate",back);
   }
}

移除popstate监听

/**
 * 移除popstate监听
 */
export function removeBrowserBackListener(back){
 console.log("remove");
    if(window.removeEventListener){
        window.removeEventListener("popstate",back,true);
   }else{
        window.detachEvent("popstate",back);
   }
}

调用步骤：

1.在页面渲染完成调用handleBrowserGoBack方法完成popstate的监听，参数（back）是页面返回时的方法。

2.页面上自己写返回的方法，即参数back

3.在页面销毁（vue-destroyed）/隐藏/关闭时调用removeBrowserBackListener移除监听，切记！！！！！

H5监听移动端物理/浏览器返回键

悦读