vue禁用浏览器返回键
mounted () {
// 禁用浏览器返回键
history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.disableBrowserBack);
},
destroyed() {
// 清除popstate事件 否则会影响到其他页面
window.removeEventListener("popstate", this.disableBrowserBack, false);
},
methods: {
disableBrowserBack() {
history.pushState(null, null, document.URL);
}
}
history的认识
history 对象包含浏览器历史。
常见属性/方法:
- history.length - 属性保存着历史记录的 URL 数量;
- history.back() - 等同于在浏览器点击后退按钮;
- history.forward() - 等同于在浏览器中点击前进按钮;
- history.go() - 加载 history 列表中的某个具体页面。
H5新增了属性/方法/事件:
- history.state - 属性用来保存记录对象;
- history.pushState() - 向浏览器的历史记录中添加一个状态;
- history.replaceState() - 修改当前历史记录实体;
- popstate事件 - 当活动历史记录条目更改时,将触发
(1).history.state
返回当前页面的 state 对象
(2).history.pushState(state, title, url)
state: 状态对象可以是任何可以序列化的对象。
title: 当前大多数浏览器都忽略此参数,尽管将来可能会使用它。
url: 新历史记录条目的 URL 由此参数指定。如果未指定此参数,则将其设置为文档的当前 URL。
3.history.replaceState(state, title, url)
修改当前历史记录实体,如果你想更新当前的 state 对象或者当前历史实体的 URL 来响应用户的的动作的话这个方法将会非常有用。参数与 pushState 类似。
4.popstate事件
当活动历史记录条目更改时,将触发 popstate 事件。
需要注意的是调用 history.pushState() 或 history.replaceState() 不会触发 popstate 事件。只有在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退按钮(或者在 Javascript 代码中调用 history.back() 或者 history.forward() 方法)。
不同的浏览器在加载页面时处理 popstate 事件的形式存在差异。页面加载时 Chrome 和 Safari 通常会触发(emit ) popstate 事件,但 Firefox 则不会
vue禁用浏览器返回键的更多相关文章
- js监听手机端点击物理返回键或js监听pc端点击浏览器返回键
之前在项目中遇到一个问题,就是在微信网页上面本来是有返回按钮的,但是大多数人都为了方便,会使用安卓手机自带的物理返回键,这个返回键按下后,就会按照你浏览器的栈存储的路径来一层一层返回,就不执行你页面上 ...
- HTML5 监听移动端浏览器返回键兼容版本
// 往windosw对象中的历史记录注入URL的方法 function addUrl() { var state = { title: "title", url: "# ...
- 监听浏览器返回键、后退、上一页事件(popstate)操作返回键
在WebApp或浏览器中,会有点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面.确认离开页面或执行一些其它操作的需求.可以使用 popstate 事件进行监听返回.后退.上一页操作. 一 ...
- 【React Native】某个页面禁用物理返回键
1.引入组件 import { BackHandler, } from 'react-native'; 2.添加监听 componentDidMount(): void { BackHandler.a ...
- vue禁用浏览器回退
解决方案 mounted() { history.pushState(null, null, document.URL) window.addEventListener('popstate', () ...
- vue 手机物理返回键关闭弹框
1.打开弹窗调用 window.history.pishState() 函数 2.关闭弹框 3.mounted 生命周期 监听popstate 事件 4.beforeDestroy 生命周期 移除po ...
- 解决IOS微信内置浏览器返回后不执行js脚本的问题
在A页面写一个$(function(){}) 后随便点击一个URL跳转到B页面 利用微信内置浏览器 返回键返回到A页面后发现这段JS不执行,后来找到了解决方案 $(function () { var ...
- mui 监听 手机 物理返回键
mui.back = function(){ return //禁用物理返回键 也可以写其他逻辑 }
- vue 移动端禁用安卓手机返回键
//禁止手机返回键 下面这段代码直接复制在index.html中,可以生效// $(document).ready(function() { if (window.history &&a ...
随机推荐
- mysql 01: source命令
使用mysql的source命令,执行sql脚本 之所以使用docker同步挂载卷的方法,是因为在docker中运行的mysql未安装vim或gedit等基本编辑器 不方便在mysql容器里直接写sq ...
- 2507-AOP- springboot中使用-使用注解方式
Springboot中使用aop,与SSM中使用AOP,整体配置与编写方式都是类似的.但是Springboot简化了很多xml配置,切点的表达式可以直接进行javaconfig. 记录一些示例 spr ...
- Odoo14 一些用的熟手的函数
# Odoo14 一些用的熟手的函数 # from odoo.tools import config # 这是直接访问配置文件,也就是当你执行./odoo-bin -c odoo.cfg的时候 # c ...
- show create table底层流程跟踪
GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 导语 SHOW CREATE TABLE语句用于为指定表/视图显示创建的语句,本文将简要描述如何在MySQL源码里跟踪和学 ...
- 产品 | GreatSQL,打造更好的MGR生态
欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 用 ...
- OpenCV4之C++入门详解
OpenCV之C++入门 1.Visual Studio安装及环境配置与搭建 下载地址:https://my.visualstudio.com/Downloads?q=Visual,下载后按照说明安装 ...
- 求教:Knife4jAggregationDesktop访问报错HTTP ERROR 404
(1)Windows Server 2019下面,java版本:c:\Users\WinUser01\.jdks\corretto-1.8.0_292\bin\java.exe(2)Knife4jAg ...
- JVM 配置参数 -D,-X,-XX 的区别
转载请注明出处: 最近在安全护网行动,需要针对服务进行不断的安全加固,如 对服务的 log4j 的安全配置进行防护,对 fastjson 的漏洞进行安全加固等,最快的防护方法就是通过在服务启动的时候, ...
- 记Windows服务器Redis 6379被攻击 被设置主从模式同步项目数据
在工作中第一次经历被攻击,我是一个前端,同时复负责维护一个已上线的项目,在最近一段时间小程序与后台经常出现这个报错, 搜了下说我的从机是只读模式,不能写入,问了同事得知这个项目是单机模式,根本不存在从 ...
- 应用集成-在Hexo、Hugo博客框架中使用Gitalk基于Github上仓库项目的issue无后端服务评论系统实践
关注「WeiyiGeek」公众号 设为「特别关注」每天带你玩转网络安全运维.应用开发.物联网IOT学习! 希望各位看友[关注.点赞.评论.收藏.投币],助力每一个梦想. 本章目录 目录 0x00 Gi ...