JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法

在实际的应用中，我们常常需要实现在移动app和浏览器中点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面或执行一些其它操作的需求，那在代码中怎样监听当点击微信、支付宝、百度糯米、百度钱包等app的返回按钮或者浏览器的上一页或后退按钮的事件呢。

我相信很多朋友像我一样，在百度、搜狗里面搜索很久都没找到方法。

下面就来告诉大家怎样监听的方法：

首先我们要了解浏览器的history。

大家知道在页面中我们可以使用javascript window history，后退到前面页面，但是由于安全原因javascript不允许修改history里已有的url链接，但可以使用pushState方法往history里增加url链接，并且提供popstate事件监测从history栈里弹出url。既然有提供popstate事件监测，那么我们就可以进行监听。

返回、后退、上一页按钮点击监听实现代码：

window.addEventListener("popstate", function(e) {
alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
}, false);

虽然我们监听到了后退事件，但是页面还是会返回上一个页面，所以我们需要使用pushState增加一个本页的url,代表本页，大家都非常清楚是#

function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}

当进入该页面，我们就给这个history压入一个本地的连接。当点击返回、后退及上一页的操作时，就进行监听，在监听代码中实现自己操作。

下面是完整的代码：

$(function(){
pushHistory();
window.addEventListener("popstate", function(e) {
alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
}, false);
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
});

以上内容只是小编给大家列出的核心代码，大家根据需求适当的添加，修改，删除代码。如果大家在参考本段代码的过程中发现有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • 微信小程序 在Chrome浏览器上运行以及WebStorm的使用

    微信小程序 在Chrome浏览器上运行以及WebStorm的使用

    「微信小程序」的开发框架体验起来,还不错--自带了UI框架.但是问题是他的IDE,表现起来相当的糟糕--其实主要是因为,我当时买WebStorm License买了好多年.所以,我觉得他的IDE真不如我这个付费好用. 而且,作为一个拥护自由和开源的 「GitHub 中国区首席Markdown程序员」.微信在「微信小程序」引导着Web开向封闭,我们再也不能愉快地分享我们的代码了. 如果我们放任下去,未来的Web世界令人堪忧. 好了,废话说完了: 文章太长不想看,可以直接看Demo哈哈: GitHu

  • JS如何设置iOS中微信浏览器的title

    说到web前端,浏览器差异是不可回避的问题,这次在项目就遇到下面的问题: 微信导航栏的内容是直接拿的项目中title来设置的.但是现在做的项目是一个单页应用,整个页面只会在第一次完全刷新,后面只会局部刷新,所以只能在页面刷新的时候通过js动态修改title.开始我们使用的做法如下: document.title = "微信导航栏想要显示的内容"; $("title").text("微信导航栏想要显示的内容"); document.getEleme

  • JavaScript中防止微信浏览器被整体拖动的方法

    JavaScript中防止微信浏览器被整体拖动的方法

    在微信网页开发中,我使用的页面结构是在body下的container覆盖全屏,container下有个header和page的容器,page负责显示所有内容并实现滚动. 结构如图: 但是遇到了一个问题:在页面已经滚动到顶部时,继续往下拖动page容器,会将微信浏览器整体往下拖,漏出"该网页由XXX提供"的提示,然后在安卓下,影响并不大,但是在iphone下,就没那么简单了,经过测试,在苹果下,往下拖动后快速滑动页面中的page,page并不会滚动,上拖同样遇到了这个问题,非常影响体验.

  • 解决微信浏览器Javascript无法使用window.location.reload()刷新页面

    场景是这样子的,页面在初始化时有一个ajax请求,在页面上有一个按钮,点击的时候执行window.location.reload(),正常情况reload()后页面依然会向后台发出请求,但在安卓的微信浏览器中reoad后请求的一直是第一次打开页面时请求的数据.可以理解为请求被缓存了,但没有实测,也不知道是否是缓存. 解决方法是,使用window.location.href="window.location.href+随机数" 代替 window.location.reload().切记

  • 解决微信内置浏览器返回上一页强制刷新问题方法

    微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的位置. BINGO~ 通过HTML5的history API + 缓存可以做到这一点. 执行原理: 1.0.通过history API的 history.pushState或 history.replaceState 保存AJAX状态: 2.0.同时将AJAX获取到的数据缓存起来(可以考虑使用H5的

  • Adnroid 微信内置浏览器清除缓存

    微信开发比较头疼的一个情况就是缓存难以清除,然而奇怪的是微信app在IOS中是可以刷新页面的,但是Android中却不知道基于什么考虑,无法清除缓存也没有刷新功能,这个就给开发者设置了不小的障碍,哪有页面是最好就不改的,然后如果去改,微信浏览器缓存着css.图片,这样改完后看效果就变得相对费劲了.       我上网查过,遇到这个蛋疼问题的不止我一个,寻寻觅觅却找不到解决办法的也不止我一个,有人说去微信"设置"."通用"中"清除微信存储空间",我

  • JavaScript 监控微信浏览器且自带返回按钮时间

    比如现在有一个操作 是 A->B->C->B 在B页面的返回键 第一次返回的是C 如果想直接返回A或者其他地方 则需要触发返回事件 pushHistory(); window.addEventListener("popstate", function(e) { //alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 window.location = 'http://www.baidu.com'; }, false

  • JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法

    在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的需求,那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包等app的返回按钮或者浏览器的上一页或后退按钮的事件呢. 我相信很多朋友像我一样,在百度.搜狗里面搜索很久都没找到方法. 下面就来告诉大家怎样监听的方法: 首先我们要了解浏览器的history. 大家知道在页面中我们可以使用javascript window history,后退到前面页面,但是由于安

  • js监听鼠标点击和键盘点击事件并自动跳转页面

    js监听鼠标点击(onmousedown)和键盘点击(onkeydown)事件并自动跳转页面,在学习的朋友可以参考下 $(function(){ var i = 0; document.onmousedown=function(event){ if(i==1){ window.open('http://www.njxblog.com'); } //setTimeout(function (){window.open('http://www.jb51.net')},2000); //定时不太好使,

  • 两种js监听滚轮事件的实现方法

    前段时间在写前端的时候,需要监听浏览器的滚轮事件 网上查了一下,找到两种监听滚轮事件的方法: 一.原生js通过window.onscroll监听 //window.onscroll = function() {//为了保证兼容性,这里取两个值,哪个有值取哪一个 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //scrollTop就是触发滚轮事件时滚轮的高度 } 二.Jquery通过$(

  • js监听input输入框值的实时变化实例

    1.在元素上同时绑定 oninput 和onporpertychanger事件 例: <script type="text/JavaScript"> function aa(e){alert("inputting!!");} </script> <input type="text" id="a" oninput="aa(event)" onporpertychange=&quo

  • js监听html页面的上下滚动事件方法

    最近在一个项目中,在写前端页面的时候,想像以前做Android时在页面时刻监听上下滚动的事件,查找资料发现由鼠标或类似用户动作触发的事件有以下图示: 不多说了,直接上代码了,经过测试可以使用: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Dome</title> <script type="text/javascript

  • vue 纯js监听滚动条到底部的实例讲解

    在网页中,我们会遇到很多在滚动条到底部的时候有数据正在加载的事件,那么怎样用vue去实现这样的内容呢?本篇只给出一个雏形,结合vue的生命周期用纯javascript写的一个监听函数,后续操作数据库的部分暂且不议. 1.怎样用纯js判断滚动条是否到底部? 先了解几个关键词: (1)滚动条到顶部的位置:scrollTop (2)当前窗口内容可视区:windowHeight (3)滚动条内容的总高度:scrollHeight 触发监听的函数是: window.onscroll = function(

  • JS监听事件的叠加和移除功能

    html DOM元素有很多on开头的监听事件,如onload.onclick等,见DOM事件列表.但是同一种事件,后面注册的会覆盖前面的: window.onresize = function(){ alert(1); } window.onresize = function(){ alert(2); } // 改变窗口大小时,只会弹出2 addEventListener监听 利用addEventListener添加监听事件,可以重复添加,并不会互相覆盖: window.addEventList

  • Fabric.js 监听元素是否相交重叠

    目录 正文 动手试试看 代码仓库 正文 fabric.js 提供了一个方法可以检查对象是否与另一个对象相交(也可以叫元素是否重叠). 这个方法叫 intersectsWithObject(). 本文主要想提一下 fabric.js 存在这么一个方便的方法. 检测元素是否相交有什么用呢? 这个功能在日常开发中其实很实用,在它的帮助下我们可以实现“防止对象碰撞”.“对象自动对齐贴合”等功能. 动手试试看 为了演示 intersectsWithObject() ,我打算做如下操作: 创建画布 创建矩形

  • Vue.js监听select2的值改变进行查询方式

    目录 监听select2的值改变进行查询 页面中引用select2组件 在js里引入如下代码: 在vue实例中使用,进行测试 Vue监听select的事件 监听select2的值改变进行查询 由于前端项目使用的是Vue.js和bootstrap整合开发,中间用到了select2下拉框,今天在做查询的时候,想根据下拉框的值变动进行监听查询,方法如下: 页面中引用select2组件 <div class="input-group input-group-sm mb-3">   

  • js监听滚动条滚动事件使得某个标签内容始终位于同一位置

    小知识点,废话不多说,直接上代码 css: 复制代码 代码如下: <pre name="code" class="css"><style> #anchor:{ position:absulate; top:40%; left:40%; width:100px; height:100px; background-color:red; } </style></pre><br> js: 复制代码 代码如下: &l

随机推荐