js禁止退出当前页面
禁止用户退出网页,就一个添加窗体历史状态方法,代码很简单,但是建议大家不要去使用,会给用户带来不友好的体验,我这里只是学习这种方法,看到自己代码上有也知道在哪里改变这些代码,所以分享一下:
实现原理:
当我们打开一个网页时,没有退回,是因为地址栏里还没有上一页的历史记录;如果你继续浏览下一页了,有了一条历史记录,你又可以退回之前浏览的网页; 哪么在这里怎么网页无法退回去上一页呢?
全部通过js代码实现:
window.history.pushState() //意思是 给窗体添加一条历史记录 //history历史的意思,pushState() 推动状态 ,方法意思是在历史记录中增加一条新的记录;
window.history.replaceState() //replaceState() 替换状态,方法意思是将当前的历史记录给替换掉,传说中的夺舍重生!
* 这两方法分别有3个参数:
* state:一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null。
* title:新页面的标题,但是所有浏览器目前都忽略这个值,就像你保存页面要你输入标题,因此这里可以填null。
* url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。一般使用#,来存放当前地址
*
* popstate 事件 :每当活动历史记录条目在同一文档的两个历史记录条目之间发生变化时,就会将事件分派到窗口。
* 也就是说窗体加载时不会触发popstate事件,只有当地址栏发生改变时才会触发popstate事件
解释完了
来看看实列:
<script>
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#"); //大家都应该知道#就代表当前连接,这里是 给地址栏添加一条当前地址的历史记录
}
pushHistory(); //页面第一次加载,先给地址栏赋个历史记录
//由于上面只能赋值一次,所以需要通过popstate事件触发时,来进行回调这个方法
window.addEventListener("popstate", function(e) { //给窗体添加一个popstate事件触发时 来回调历史记录方法
pushHistory();
})
</script>
--------------------------------------------------------------------------------------------------------------------
到这里就结束咯 ,把上面这段js 直接拷贝到你的页面去,然后你的页面就无法退出了,但是建议大家不要这样做哦,我这里只是为了学习 这个方法怎么用而已,仅此而已~~~~~~~~~
js禁止退出当前页面的更多相关文章
- 禁止页面复制功能 js禁止复制 禁用页面右键菜单
<body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: <script t ...
- js禁止复制页面文字
做项目的时候有客户提出要求,不能用用户浏览他发表的文章时复制他的文章 一种比较简单的方法,禁止用户选中页面的文字和禁止用户右键菜单 document.oncontextmenu = new Funct ...
- js禁止浏览器页面后退功能
js禁止浏览器页面后退功能: <script> $(function(){ ) { //防止页面后退 history.pushState(null, null, document.URL) ...
- 【VUE/JS】vue和js禁止浏览器页面后退
1.vue 禁止浏览器后退需求是:需要某个路由不能通过浏览器返回,同时不影响相互之间的切换整理一下解决方法 和 使用方法: 1.在路由配置中给这个路由添加meta信息,比如: { path: '/ho ...
- js离开或刷新页面检测(且兼容FF,IE,Chrome)
<!DOCTYPE html> <html> <head> <script> function closeIt() { return confirm(& ...
- js中退出语句break,continue和return 比较
js中退出语句break,continue和return 比较 在 break,continue和return 三个关键字中, break,continue是一起的,return 是函数返回语句,但是 ...
- silverlight 退出当前页面、跳转到主页面
1.退出当前页面 private void imgExit_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { if (Message ...
- js中退出语句break,continue和return 比较(转)
原链接:http://blog.163.com/ued_er/blog/static/199703159201210283107315/ js中退出语句break,continue和return 比较 ...
- js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll
开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图: 网上好多js禁止操作的做法禁止了内部Scroll,导致页面不能滚动,上拉加载失效,例如这种做法: ...
随机推荐
- 【洛谷】P1275 魔板(暴力&思维)
题目描述 有这样一种魔板:它是一个长方形的面板,被划分成n行m列的n*m个方格.每个方格内有一个小灯泡,灯泡的状态有两种(亮或暗).我们可以通过若干操作使魔板从一个状态改变为另一个状态.操作的方式有两 ...
- IDEA_2019.2的安装与个人配置(Windows)
1. 下载 官方下载网站:https://www.jetbrains.com/idea/download/ IDEA是支持多平台的开发工具,分为Windows.Mac和Linux三个平台,这里就只拿W ...
- html5中time元素详解
html5中time元素详解 一.总结 一句话总结: time的使用的话主要是将时间放在datetime属性里面:<time datetime="2015-10-22"> ...
- 小程序运行报错navigateTo:fail page "pages/warn/warn" is not found
在index.js中配置触发时页面转发 wx.navigateTo({ url: '../warn/warn', }) 实际上触发时报错页面找不到 原因是页面路径没有在app.json里面没有定义过, ...
- ubuntu 如何查看安装了哪些包
dpkg -l apt-cache search package 搜索包apt-cache show package 获取包的相关信息,如说明.大小.版本等sudo apt-get install p ...
- 【转】IDEA新建项目时,没有Spring Initializr选项(亲测有效)
最近开始使用IDEA作为开发工具,然后也是打算开始学习使用spring boot.看着博客来进行操作上手spring boot,很多都是说创建一个新项目(Create New Project) 选择 ...
- Java字节码增强探秘
Java字节码增强探秘 https://mp.weixin.qq.com/s/CH9D-E7fxuu462Q2S3t0AA
- post请求头中常见content-type(非常重要)
定义和用法 enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码.默认地,表单数据会编码为 "application/x-www-form-urlencoded". ...
- springboot+jwt完成登录认证
本demo用于测试jwt,通过登录验证通过后,使用jwt生成token,然后在请求header中携带token完成访问用户列表信息. 准备工作: 1. 实体类SysUser.java package ...
- idea 报错javax/xml/bind/DatatypeConverter
idea 报错javax/xml/bind/DatatypeConverter java.lang.NoClassDefFoundError: javax/xml/bind/DatatypeCon ...