摘要:保存当前链接添加一个新页面到浏览器历史只有做这一步点击返回按钮才不会返回上一页而是留在本页并触发事件现在的链接和之前保存的一致的话就执行让这个事件只响应一次如果想要防止用户误点击返回键,上面的函数可以这样调用好恐怖,难怪以前一直禁用类似的
1.检查是否触屏设备
//此方法在chrome模拟手机的模式中似乎无效,但是在iphone中是有效的,在安卓中待测试 function isTouchDevice() { return ("ontouchstart" in document.documentElement); }2.检测更多的设备和浏览器信息,靠的是ua信息
var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息 trident: u.indexOf("Trident") > -1, //IE内核 presto: u.indexOf("Presto") > -1, //opera内核 webKit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核 gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐内核 mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), //是否为移动终端 ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, //android终端或者uc浏览器 iPhone: u.indexOf("iPhone") > -1 || u.indexOf("Mac") > -1, //是否为iPhone或者QQHD浏览器 iPad: u.indexOf("iPad") > -1, //是否iPad webApp: u.indexOf("Safari") == -1 //是否web应该程序,没有头部与底部 }; }(), language:(navigator.browserLanguage || navigator.language).toLowerCase() } //document.writeln("语言版本: "+browser.language); //document.writeln(" 是否为移动终端: "+browser.versions.mobile); //document.writeln(" ios终端: "+browser.versions.ios); //document.writeln(" android终端: "+browser.versions.android); //document.writeln(" 是否为iPhone: "+browser.versions.iPhone); //document.writeln(" 是否iPad: "+browser.versions.iPad); //document.writeln(navigator.userAgent);3.H5侦听用户点击一次返回按钮,做到不刷新页面,而是回调函数
//用法 onBackBtnClick(function () { //点击返回按钮后要做些什么 }); /** * 侦听浏览器返回按钮的点击事件。 * ps1.每调用一次本函数,本浏览器窗口会重定向到一个新页面,但是页面不会刷新,所以在用户看来除了地址变了,其它什么都没变, * 而在浏览器看来是跳到了新页面,只是没有加载新页面的元素 * @param fn function 当用户点击浏览器返回按钮,返回到调用本函数时所在页面时执行。 * ps.因为允许多次调用本函数,所以有可能会跳了很多个页面,所以不是每次点返回键都会调用这个函数 * @param [one=true] bool 这个事件是否只响应一次,true是,false否。默认true。 * */ function onBackBtnClick(fn,one) { var mark = Math.random(), thisUrl = location.href;//保存当前链接 //添加一个新页面到浏览器历史(只有做这一步,点击返回按钮才不会返回上一页,而是留在本页并触发事件) history.pushState({}, "", "#newWin&mark="+mark); window.addEventListener("popstate",back); function back(){ if(location.href==thisUrl){//现在的链接和之前保存的一致的话,就执行 console.log(location.href,thisUrl); fn&&fn(); if(one!==false) window.removeEventListener("popstate",back);//让这个事件只响应一次 } } }
如果想要防止用户误点击返回键,上面的函数可以这样调用:
function disableBackBtn(){ onBackBtnClick(function(){ disableBackBtn(); }); } disableBackBtn();好恐怖,难怪以前一直禁用类似的api
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/49553.html
摘要:保存当前链接添加一个新页面到浏览器历史只有做这一步点击返回按钮才不会返回上一页而是留在本页并触发事件现在的链接和之前保存的一致的话就执行让这个事件只响应一次如果想要防止用户误点击返回键,上面的函数可以这样调用好恐怖,难怪以前一直禁用类似的 1.检查是否触屏设备 //此方法在chrome模拟手机的模式中似乎无效,但是在iphone中是有效的,在安卓中待测试 function isTouc...
摘要:在用户喜爱的众多功能中,使用率最高的是模版消息推送。模版消息推送数的量级也由早期每天几百条,变为后来的每天数百万条。平台支持少知晓云已经支持包括微信小程序和支付宝小程序在内的各大小程序平台的消息推送,对平台的支持也将在近期上线。 两年多前,为了让更多的人找到好玩、好用的小程序,我们成立了「知晓程序」。 再后来,我们推出了后端云服务平台——知晓云,帮助大家降低创业成本,提升开发效率。 「...
阅读 3256·2021-11-24 09:39
阅读 3823·2021-11-22 09:34
阅读 4691·2021-08-11 11:17
阅读 1034·2019-08-29 13:58
阅读 2545·2019-08-28 18:18
阅读 512·2019-08-26 12:24
阅读 788·2019-08-26 12:14
阅读 670·2019-08-26 11:58