在实际的应用中, 我们常常需要实现在移动 App 和浏览器中点击返回, 后退, 上一页等按钮实现自己的关闭页面, 调整到指定页面或执行一些其它操作的需求, 那在代码中怎样监听当点击微信, 支付宝, 百度糯米, 百度钱包等 App 的返回按钮或者浏览器的上一页或后退按钮的事件呢.
我相信很多朋友像我一样, 在百度, 搜狗里面搜索很久都没找到方法.
下面就来告诉大家怎样监听的方法:
首先我们要了解浏览器的 history.
大家知道在页面中我们可以使用 JavaScript Windows history, 后退到前面页面, 但是由于安全原因 JavaScript 不允许修改 history 里已有的 url 链接, 但可以使用 pushState 方法往 history 里增加 url 链接, 并且提供 popstate 事件监测从 history 栈里弹出 url. 既然有提供 popstate 事件监测, 那么我们就可以进行监听.
返回, 后退, 上一页按钮点击监听实现代码:
- Windows.addEventListener("popstate", function(e) {
- alert("我监听到了浏览器的返回按钮事件啦");// 根据自己的需求实现自己的功能
- }, false);
虽然我们监听到了后退事件, 但是页面还是会返回上一个页面, 所以我们需要使用 pushState 增加一个本页的 url, 代表本页, 大家都非常清楚是 #
- function pushHistory() {
- var state = {
- title: "title",
- url: "#"
- };
- Windows.history.pushState(state, "title", "#");
- }
当进入该页面, 我们就给这个 history 压入一个本地的连接. 当点击返回, 后退及上一页的操作时, 就进行监听, 在监听代码中实现自己操作.
下面是完整的代码:
- $(function(){
- pushHistory();
- Windows.addEventListener("popstate", function(e) {
- alert("我监听到了浏览器的返回按钮事件啦");// 根据自己的需求实现自己的功能
- }, false);
- function pushHistory() {
- var state = {
- title: "title",
- url: "#"
- };
- Windows.history.pushState(state, "title", "#");
- }
- });
转载自:
来源: http://www.bubuko.com/infodetail-3039002.html