IOS微信浏览器返回事件监听问题
业务需求:从主页进入A订单页面,然后经过各种刷新或点标签加载后点左上角的返回直接返回到主页
采取方法:采用onpopstate事件监听url改变,从而跳转到主页
遇到的问题:安卓上测试没问题;苹果手机微信里进入A页面直接触发onpopstate返回主页,造成类似闪退现象,
给popstate监听事件addEventListener加延时后问题依旧,设置flag标志使popstate事件里的跳转函数加延时问题解决,
但是只是解决了从主页跳转到A页面的问题,A订单页面点订单跳转到订单详情B页面,从B页面返回A页面时出现了问题,
直接触发popstate的回调函数跳转到了主页,而没有留在A页面。目前只有IOS上的微信出现这个问题了,怎么解决?
在实际的应用中,我们常常需要实现在移动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(){
getHistory();
var flag=false;
setTimeout(function(){
flag=true
},1000)
window.addEventListener('popstate',function(e){
//监听到返回事件
if(flag){
//自己想要做的事情
}
getHistory();
},false);
function getHistory(){
var state={
title:'',
url:'//可写返回事件的跳转路径'
} ;
window.history.pushState(state,'title',url);
}
})
IOS微信浏览器返回事件监听问题的更多相关文章
- 微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制,移动端禁止图片长按和vivo手机点击img标签放大图片
以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...
- ios微信浏览器click事件不起作用的解决方法
$(document).on( "click", ".weui_cell", function (event) {alert(); }); JS代码是这样的,h ...
- 监听微信端,手机端,ios端的浏览器返回事件,pc端关闭事件
直接上代码了,可以监听微信端,手机端,iOS端的浏览器返回事件,关闭事件不支持 当进入该页面,我们就给这个history压入一个本地的连接.当点击返回.后退及上一页的操作时,就进行监听,在监听代码中实 ...
- js 事件监听 兼容浏览器
js 事件监听 兼容浏览器 ie 用 attachEvent w3c(firefox/chrome) 用 addEventListener 删除事件监听 ie 用 detachEven ...
- IOS微信浏览器点击事件不起作用问题
问题: $(document).on("click",".btn",function(){alert("1")}); 在微信浏览器上点击不起 ...
- es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- 监听浏览器tab选项卡选中事件,点击浏览器tab标签页回调事件,浏览器tab切换监听事件
js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if( ...
- ios 上浏览器返回上一页不会刷新页面问题,页面初始化的方法不执行
https://blog.csdn.net/yang450712123/article/details/79276102 https://blog.csdn.net/Chengbin_Huang/ar ...
- 改进:js修改iOS微信浏览器的title
问题简介 前端入门没多久,可能连入门也不算,最近网上流行各自书籍改名,什么<前端开发,从入门到放弃>,<Android开发,从入门到改行>之类的,程序员真是个爱自嘲的群体,但我 ...
随机推荐
- 【转】JVM类装载机制的解析,热更新的探讨(二)
同样,一个Class对象必须知道自己的超类.超级接口.因此,Class对象会引用自己的超类和超级接口的Class对象.这种引用一定是实例引用.(实际上,超类.超级接口的引用也存储在常量池中,但为了区分 ...
- vuejs2从入门到精通视频教程
https://www.cnblogs.com/web-666/p/8648607.html 一.基础部分 0.课件 1.介绍 2.vue实例 3.模板语法 4.计算属性和观察者 5.Class与St ...
- 启动项目报错:Unsupported major.minor version 52.0
解决方案: 确保Build Path或者电脑配置的环境变量版本号,和pom中的一致 Exception in thread "main" java.lang.Unsupported ...
- ISO/IEC 9899:2011 条款6.3——转换
6.3 转换 1.有些操作符将操作数的值自动地从一种类型转换为另一种.本子条款指定了从这么一个隐式转换所要求的结果,以及从一个投射操作(一个显式转换)所要求的结果.在6.3.1.8中所列出的信息概括了 ...
- IDEA子项目的相互依赖
A项目依赖B项目 一.B项目打包,执行install 这一步其实就是把你的项目打包到本地仓库,你可以在本地仓库看到相应的jar包 二.在A项目的pom.xml引入依赖可以了 当B项目修改后,需要重新打 ...
- linux安装上传下载工具lrszs
普通用户下使用sudo获取root权限,root用户直接安装: [mall@VM_0_7_centos ~]$ sudo yum -y install lrzsz Loaded plugins: fa ...
- php 微信公众平台OAuth2.0网页授权,获取用户信息代码类封装demo
get_wx_data.php <?php /** * 获取微信用户信息 * @author: Lucky hypo */ class GetWxData{ private $appid = ' ...
- dubbo+zookeeper+springboot简单示例
目录 dubbo+zookeeper+springboot简单示例 zookeeper安装使用 api子模块 生产者producer 消费者consumer @(目录) dubbo+zookeeper ...
- APP排查内存泄漏最简单和直观的方法
内存泄漏无疑会严重影响用户体验,一些本应该废弃的资源和对象无法被释放,导致手机内存的浪费,app使用的卡顿,那么如何排查内存泄漏呢? 当然,首先我们有google的官方文档可以参考,大部分博客 ...
- DevOps - DevOps精要 - 落地
1 - 关键问题 如何向不具备相关基础知识的人说明和解释DevOps? 如何在组织和团队中推广和实施DevOps? 2 - 在组织中实施DevOps 在全新的组织或服务开发中,没有既定规则和老旧的习惯 ...