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移除监听，切记！！！！！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！