popstate_HTML onpopstate 属性 - Break易站
有时候,由于业务需求,需要监听用户的后退行为,比如禁止用户后退,比如想在用户后退是给链接加上参数,这该怎么办呢?window对象的popstate事件就派上用场了
每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发. 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝.
但是,调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法).
要触发popstate事件,需要两步
1.添加并激活一个历史记录条目(history.pushState)
2.改变历史记录条目(用户行为,比如后退,前进)
以下是一个场景,当用户触发popstate事件时,检测上一个页面的url,如果是指定url,则加上指定的查询字符串参数,便于后台知道访问url源自用户的"后退"等动作,而不是直接输入网址
//添加并激活一个历史条目
function pushHistory() {
var state = {
};
window.history.pushState(state, "");
}
var url=document.referrer.replace('http://'+window.location.host,'');//上一页的url
if(url.indexOf('/mobile/index/index')>-1){//如果上一页url是指定url
var newIndex //用户触发popstate时间后,将要跳转的url
if(url.indexOf('?')>0){//已经携带了查询字符串,则追加字符串
newIndex=document.referrer+'&popstate=1'
}else{//没有,则加上字符串参数
newIndex=document.referrer+'?popstate=1'
}
pushHistory();//添加并激活一个历史条目
//当触发popstate事件时,执行的逻辑
window.addEventListener("popstate", function(e) {
window.location.href=newIndex;//根据自己的需求实现自己的功能,我这里是跳转,也可以变成刷新,或者什么都不做,如果是什么都不做,需要再次添加并激活一个历史记录条目
}, false);
Tips:
1.后退/前进时,通常情况下,浏览器会重新渲染页面,但并没有对当前页面重新发起请求,而且控件的值不会变.
2.微信浏览器(真机)的行为有些不一样,当后退时,如果后退后的一页有popstate事件,则会立即触发,这不是我们想要的.因此需要做一个小的改动
var canPopstate=false //1秒内不运行执行popstate里的逻辑
setTimeout(function () {//1秒后才真正执行popstate触发后的逻辑
canPopstate=true
},5000)
window.addEventListener("popstate", function(e) {
if(canPopstate){//可以执行了
//业务逻辑
window.location.href='/'
}else{//如果还没到1秒用户点击了后退,则继续添加历史记录
history.pushState({},'','aa=bb')
}
}, false);
history.pushState({},'','acc=ddd')
以上代码可以防止微信浏览器内点击后退时立即执行popstate里的逻辑
3.无论当前页面增加了几个历史,一旦请求其他页面,则后退只保留最新的历史.
popstate_HTML onpopstate 属性 - Break易站相关推荐
- java 主线程_Java中的主线程 - Break易站
Java 多线程 Java为多线程编程提供内置支持.多线程程序包含两个或多个可以并发运行的部分.这样的程序的每个部分称为线程,每个线程定义一个单独的执行路径. Java中的主线程 当Java程序启动时 ...
- SimpleXMLRPC_SimpleXMLRPCServer (Internet) – Python 中文开发手册 - Break易站
Python 中文开发手册 SimpleXMLRPCServer (Internet) - Python 中文开发手册 注意 该SimpleXMLRPCServer模块已被合并到Python 3中.当 ...
- linebreak_operator-linebreak (Rules) – Eslint 中文开发手册 - Break易站
Eslint 中文开发手册 operator-linebreak (Rules) - Eslint 中文开发手册 在命令行上的--fix选项可以自动修复一些被这条规则反映的问题. 当一条语句太长而不适 ...
- python stringio_StringIO (String) – Python 中文开发手册 - Break易站
Python 中文开发手册 StringIO (String) - Python 中文开发手册 这个模块实现了一个文件类,StringIO它读取和写入字符串缓冲区(也称为内存文件).请参阅文件对象的操 ...
- java queue size_Java中的PriorityQueue size() 方法 - Break易站
Java.util.PriorityQueue.size()方法用于获取PriorityQueue的大小或PriorityQueue中存在的元素数. 句法: Priority_Queue.size() ...
- golang日志服务器_日志系统 | log/syslog (log) – Go 中文开发手册 - Break易站
Go 中文开发手册 日志系统 | log/syslog (log) - Go 中文开发手册 import "log/syslog"概述索引示例 概述 软件包系统日志为系统日志服务提 ...
- java content()_Java contentEquals() 方法 - Break易站
Java contentEquals() 方法 Java String类 contentEquals() 方法用于将此字符串与指定的 StringBuffer 比较. 语法 public boolea ...
- java 获取文件权限_Java中的文件权限,检查权限和更改权限 - Break易站
Java提供了许多方法调用来检查和更改文件的权限,例如可以将只读文件更改为具有写入权限.当用户想要限制文件允许的操作时,需要更改文件权限.例如,文件权限可以从写入更改为只读,因为用户不再想要编辑文件. ...
- java map equals_Java中EnumMap的equals()方法: Java.util.EnumMap.equals() - Break易站
Java中的Java.util.EnumMap.equals(obj)用于将传递的对象与 句法: boolean equals(Object obj) 参数:该方法采用Object类型的一个参数obj ...
最新文章
- scratch小游戏脚本大全_酷酷带你一起做小游戏--跳一跳
- 在离线环境中安装Visual Stuido 2017
- android 资源
- linux意想不到题4
- java的迭代器类中有哪些类_java中的集合类 以及 迭代器
- maven 生命周期的指令
- vim创建程序文件自动添加头部注释/自动文件头注释与模板定义
- SysUtils.UpperCase、SysUtils.LowerCase - 大小写转换
- Chrome浏览器去广告插件 —— (Adblock Plus)
- Web Polygraph (WebAxe-4) 测试反向代理缓存服务器
- android 闪屏图片,Android的闪屏图像尺寸,以适应所有设备Android的闪屏图像尺寸,以适应所有设备(Andro...
- FITC-LCA 绿色荧光标记小扁豆凝集素
- 有哪些好用的App云测试平台
- 新一代开源免费的轻量级 SSH 终端,非常炫酷好用
- BuildPack:无需编写 Dockerfile,新一代的企业镜像打包工具
- 马力测试 软件,【图】【分享百公里加速测试软件DYNOLICIOUS】内附楼主的测试结果!...
- Java Security:Java加密框架(JCA)简要说明
- 驾培行业应对新形势“自学直考”新格局冲击剖析
- 【ElasticSearch】ELK statck
- 网页设计全套视频教程(html,网页三剑客,CSS,Flash,ASP,Photoshop)
热门文章
- Android开发之非常好用的日志工具类(公司项目挖出来的)
- linux 查看历史打印,2019-02-01 Linux查看用户/历史命令
- c语言车库计费系统,基于单片机智能车库计费系统设计.doc
- Linux安装net的工具,centos7安装netbox(不错开源网络管理工具) – 运维那些事
- 安装TCExam经验
- api接口响应类型定义
- 解决Can 't connect to local MySQL server throug
- tkinter 类继承的三种方式
- JavaScript实现TwoQueues缓存模型
- MonoRail MVC应用(2)-构建多层结构的应用程序