(转)移动端自定义返回上一页的方法:history
在实际的应用中,我们常常需要实现在移动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", "#");
} });
若需要自定义返回事件,可以在监听成功的里面添加需要返回页面的跳转,代码如下:
window.addEventListener("popstate", () => {
history.push(utils.jump({ path:"/index" }));
}, false);
注意:
history.pushState一个“#”,将会导致该页面跳转其他页面时,若被跳转页面存在于history中,则跳转到被跳转页面进入该页面的位置。
例如:用户在A页面下滑到中间位置,点击跳转到B页面,在B页面history.pushState一个“#”,则B页面跳转A页面时,将会跳转到A页面中用户下滑的中间位置,而不是A页面的顶部。
解决方法:history.pushState当前页面的地址。
原文地址:https://blog.csdn.net/mr_smile2014/article/details/52064650?utm_source=gold_browser_extension
(转)移动端自定义返回上一页的方法:history的更多相关文章
- phpcms v9自定义表单提交后返回上一页实现方法
PHPcms v9中提交自定义表单后默认都是回到首页的,是不是感觉很不爽! 接下来,就说下phpcms v9自定义表单提交后返回上一页实现方法. 1.找到这个文件 phpcms\modules\for ...
- 微信小程序返回上一页的方法并传参
这个有点像子-->父传值 第一步,在子页面点击上一步或者保存数据请求成功以后添加如下代码. var pages = getCurrentPages(); var prevPage = pages ...
- jq,返回上一页,小记history.back(-1)和history.go(-1)区别
<input type="button" name="back" value="重新填写" onclick="javascr ...
- [moka同学收藏]网页上的“返回上一页”的几种实现代码
我们在制作网页的时候,经常在网页上要用到"返回上一页"的功能.这一功能在制作网页的时候会有多种编码方法,在此,笔者将比较常用的几种编码写作方法在下面列出来,供各位技术人员参考使用. ...
- 移动端返回上一页,刚需!document.referrer 详解
返回上一页,在PC端我们可以使用:history.go(-1)或者history.back(),可以正常返回第一层.这样,我们不需要上一页的 url 具体是什么,只要使用 history 一般都没啥问 ...
- angular+ionic返回上一页并刷新
假定当前页面为editCata页面,要返回的是cataDetail页面.目前我找到两种方法实现返回上一页并刷新,如果以后有其它方法,再继续添加. 1.在editCataCtrl.js中注入$ionic ...
- IOS 微信返回按钮事件控制弹层关闭还是返回上一页
在微信公共号内绑定域名后或微信内打开第三方链接跳转非单页面网站时,经常会有弹层Modal的需求,此时如果用户习惯性点击微信自带的返回“<”按钮,就会跳转回上一页或退出网站,而为了避免这种不好的误 ...
- vue项目中阻止浏览器返回上一页
vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页 与 A页面 来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候 ...
- javascript解决在safari浏览器中使用history.back()返回上一页后页面不会刷新的问题
我们知道,在JavaScript中提供了一个window.history.back()方法用于返回上一页,另外也可以使用window.history.go(-1)返回上一页(跳转). 在其他的主流浏览 ...
随机推荐
- php 时间戳转为多少分钟前 小时前 天前
function mdate($time = NULL) { $text = ''; $time = $time === NULL || $time > time() ? time() : in ...
- JS生成一个种子随机数(伪随机数)
原文链接:https://geniuspeng.github.io/2016/09/12/js-random/ 最近有一个需求,需要生成一个随机数,但是又不能完全随机,就是说需要一个种子seed,se ...
- 【翻译自mos文章】Clusterware间歇性的hang,命令报CRS-184而且Network Socket Files in /tmp/.oracle or /var/tmp/.oracle被删
来源于: Clusterware Intermittently Hangs And Commands Fail With CRS-184 as Network Socker Files in /tmp ...
- [内核编程] Windebug双机调试环境搭建
Windebug双机调试环境搭建 开始进行内核编程/驱动编程的调试工作是非常烦人的,由于程序运行与内核层不受操作系统的管控,所以容易引起主机蓝屏和崩溃是常有的事.这也就使得内核程序的调试成了一大 ...
- Deepin系统更新apt-get源
1.复制原文件备份sudo cp /etc/apt/source.list /etc/apt/source.list.bak2.编辑源列表文件sudo vim /etc/apt/source.list ...
- string与QString之间的转换(两种方法:fromStdString直接转换,或者fromLocal8Bit(cstr.c_str())
string str;QString qstr; //从QString 到 std::stringstr = qstr.toStdString(); //从std::string 到QStringqs ...
- 【codeforces 757A】Gotta Catch Em' All!
time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...
- Local database deployment problems and fixtures
/*By Jiangong SUN*/ After encountering some problems in deploying databases to local server, here ar ...
- TensorFlow 学习(八)—— 梯度计算(gradient computation)
maxpooling 的 max 函数关于某变量的偏导也是分段的,关于它就是 1,不关于它就是 0: BP 是反向传播求关于参数的偏导,SGD 则是梯度更新,是优化算法: 1. 一个实例 relu = ...
- redis集群搭建手册
搭建集群需要用到安装后的redis单机版的bin目录,所以我们先搭建redis单机版 Redis单机版搭建: 因为需要安装redis源码包,所以我们需要gcc环境支持 : 使用FTP工具将压缩包上传至 ...