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 ...
随机推荐
- vscode problem
1.Inconsistent use of tabs and spaces in indentation 原因:tab和空格键不能同时使用 vs code按住ctrl + p,输入以下内容 >c ...
- Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript来打造属于自己的个性化社交分享系统
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_143 每一个应用程序,其实都会有分享的需求,比如一键分享一篇文章或者一些活动到微博或者微信亦或者是twitter等社交平台,因为人 ...
- Odoo14 ir.actions.act_window
xml声明 1 <record id="res_company_user_action" model="ir.actions.act_window"> ...
- cache2go-源码阅读
简介 cache2go 是非常简短的 go 开源项目了,很适合作为第一个读源码项目. 如果你有一定的 go 开发经验,读起来会感觉到比较容易. 如果你刚刚接触 go 语音,基础知识还不完全了解,希望阅 ...
- Apache DolphinScheduler 项目笔记 — 1. 问题定位和排查问题
导语: Yuanhao Ji 同学是<暑期 2021 - API 模块 UT 测试问题解决>项目负责人,本文记录了他是如何排查和定位问题. 1. 背景 问题:在部分 UT 中使用 Powe ...
- CF280D k-Maximum Subsequence Sum(线段树)
在做这题时我一开始把\(tag\)写入了结构体 #include <iostream> #include <cstdio> #include <cstring> # ...
- 1、spingIOC+IDEA+Maven
1.先配置spring.springmvc通用xml文件的头部信息 spring.springmvc通用xml文件的模板内容如下: 1 <?xml version="1.0" ...
- 图解 Kafka 超高并发网络架构演进过程
阅读本文大约需要 30 分钟. 大家好,我是 华仔, 又跟大家见面了. 上一篇作为专题系列的第一篇,我们深度剖析了关于 Kafka 存储架构设计的实现细节,今天开启第二篇,我们来深度剖析下「Kafka ...
- 使springAOP生效不一定要加@EnableAspectJAutoProxy注解
在上篇文章<springAOP和AspectJ有关系吗?如何使用springAOP面向切面编程>中遗留了一个问题,那就是在springboot中使用springAOP需要加@EnableA ...
- YC-Framework版本更新:V1.0.9
分布式微服务框架:YC-Framework版本更新V1.0.9!!! 本文主要内容: 1.V1.0.9版本更新主要内容 2.YC-Framework新的征程 一.V1.0.9版本更新主要内容 (1)接 ...