document.referrer 配合微信监听返回按钮优化用户体验
document.referrer是javascript提供的默认返回并刷新页面的方法;同时用document.referrer可以获取到上一个页面的url;
那么具体如何使用呢?
举个列子:我们在做商城的时候,会有地址列表页;如下图地址列表页,点击添加收货地址进入添加收货地址页面。当新的收货地址添加完毕后,我们要自动返回到这个页面并且刷新改页面数据;那么就可以用document.referrer方法;
当添加完新地址返回到地址列表页后,数据是刷新了。但是如果这时按返回按键,会发现又会返回到添加新地址页面。那么用户体验度是非常不好的。我们要达到的效果应该是点击返回按钮,返回到进入地址列表的那个页面;
解决方法:可以在地址列表页声明变量获取上一个页面的地址:
思路:获取收货地址页面URL上的参数,判断当前列表页是否在添加收货地址页面过来的;然后进行操作;
var url = document.referrer;//获取上一个页面的地址
var reg = RegExp(/address/);//声明一个增则表达,具体需要根据需要判断的URL去创建;
if(reg.test(str)){
//收货地址页面过来的
}else{
//正常顺序进入的;
}
//这时候需要监听微信返回按键
pushHistory();
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
};
//通过监听微信按钮实现正常返回;
if(reg.test(str)){
window.addEventListener("popstate", function(e) { //回调函数中实现需要的功能
window.history.go(-2);//正常回退 //两级 第一级编辑页面 第二级别当前页面
}, false);
}
document.referrer 配合微信监听返回按钮优化用户体验相关推荐
- 微信公众号监听返回按钮问题解决
2017年12月21日 微信公众号监听返回按钮问题解决 //首页返回路径 $(function(){pushHistory();var bool = false;setTimeout(function ...
- vue 监听返回按钮
2020-09-27 09:21:30 移动端当用户使用默认返回按钮的时候,或左滑,或点击返回键 这时候需要监听返回按钮 1.挂载完成后,判断是否支持popstate mounted(){ if (w ...
- 【Android】ActionBar监听返回按钮
android生成的Activity默认是不显示ActionBar的,如果有需要可以把它打开,并且设置主副标题.返回键键等,重写onOptionsItemSelected才能点击返回键返回上一层 pu ...
- 微信公众号监听返回按钮关闭当前界面,部分安卓机监听popstate失败【小程序与公众号】
需求: 微信公众号开发的时候,可能会出现这种需求: 微信公众号内指定某个网页在点击返回键时不回退到上一级,而是直接关闭微信浏览器窗口,用户点击返回按钮本身就是一个返回事件. 解决方案: 利用监听返回事 ...
- php 微信监听返回键,JavaScript_JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法,在实际的应用中,我们常常需 - phpStudy...
JS监听微信.支付宝等移动app及浏览器的返回.后退.上一页按钮的事件方法 在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一 ...
- js微信监听返回_JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法...
在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的需求,那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包等 ...
- js微信监听返回_微信小程序(2)- 框架结构amp;运行环境
一.小程序框架结构 小程序框架分场景获取.逻辑层和视图层 场景获取:场景值是用来描述用户进入小程序的路径,可以在小程序的生命周期onLaunch 或 onShow 里获取.也可以通过wx.getLau ...
- mui框架下监听返回按钮
用于监听mui框架下的Android手机的返回按键(物理键) 1 mui.back = function() { 2 if(b == true) {//一个标识符,在某个状态下不允许双击返回关闭程序 ...
- ionic4监听返回事件 AppMinimize navController
1:引入Platform.ToastController. Nav. NavController import { Platform, ToastController, Nav, NavControl ...
最新文章
- software reporter tool占用高_广安市园林车载高射程雾炮机厂家供货
- 整型数与字符串之间的转化
- OpenCV长方形squares探测器的实例(附完整代码)
- HTML 5 全局属性
- [ECMAScript] es6对函数做了哪些优化?
- Spring - Bean注解配置光速入门
- sqlite3简单操作
- Excel如何处理x,y坐标的合并
- Python官方文档学习心得(第三篇)
- linux 进程0 写时复制,linux 写时复制 COW 过程梳理
- DevExtreme 移动跨平台开发 C#语言
- Canon EOS Utility安装和使用说明
- MagicDraw二次开发过程
- Win7/10亲测可用:湘源控规6+CAD200832+64
- esxi虚拟化是基于linux吗,虚拟化 – 如何在虚拟机中运行VMWare ESX或ESXi?
- 【Shading】Shading 着色
- 最棒的 7 个 Laravel admin 后台管理系统推荐 - 卡拉云
- 已解决:Failure to find com.oracle:ojdbc6:jar:11.2.0.4.0-atlassian-hosted
- Nginx 之父已被释放!
- 虚拟空间考古?其实它早在一千年前就存在了 | 浅空间专栏
热门文章
- 全面HTML5化:火狐移动操作系统B2G价值几何
- 对象数组根据对象的某一属性值的大小进行数组排序
- python中main方法的用法_Python中的main方法
- Java不用main方法运行_如何在不定义main方法的情况下运行Java程序?
- mac制作视频导出gif
- excel怎么设置打印区域_这也太省心了吧!excel的打印区域竟然可以自动调整大小...
- oracle 加载数据戽_oracle字符集 - Oracle数据库管理 - ITPUB论坛-中国专业的IT技术社区...
- android真机测试时手机不能识别的问题
- Echarts 折线图 渐变色区域图 十字架
- 【Python】Jupyter .ipynb