js实现关闭网页出现是否离开提示
作者:cnblogs 发布时间:2024-05-09 10:36:13
大家是否经常遇到在关闭网页的时候,会看到一个确定是否离开当前页面的提示框?想一些在线测试系统、信息录入系统等就经常会有这一些提示,避免用户有意或者无意中关掉了页面,导致数据丢失。这里面的实现过程很简单,利用了HTML DOM事件中的onunload和onbeforeunload方法。
unload 事件属性
定义:当用户卸载文档时执行一段 JavaScript,例如:
// body
<body onunload="goodbye()">
//window
window.onbeforeunload=function(e){
var e = window.event||e;
e.returnValue=("确定离开当前页面吗?");
}
用法:当用户离开页面时,会发生 unload 事件。注意:如果您重载页面,也会触发 unload 事件(以及 onload 事件)。
触发于:
关闭浏览器窗口通过地址栏或收藏夹前往其他页面的时候点击返回,前进,刷新,主页其中一个的时候点击 一个前往其他页面的url连接的时候调用以下任意一个事件的时候:click,document write,document open,document close,window close ,window navigate ,window NavigateAndFind,location replace,location reload,form submit. 当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。重新赋予location.href的值的时候。通过input type="submit"按钮提交一个具有指定action的表单的时候。 onbeforeunload 事件属性
定义:在即将离开当前页面(刷新或关闭)时执行 JavaScript,例如:
//body
<body onbeforeunload="goodbye()">//window
window.onbeforeunload=function(e){
var e = window.event||e;
e.returnValue=("确定离开当前页面吗?");
}
用法:onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发。该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面。对话框默认的提示信息根据不同的浏览器有所不同,标准的信息类似 "确定要离开此页吗?"。该信息不能删除。但你可以自定义一些消息提示与标准信息一起显示在对话框。注意: 在 Firefox 浏览器中,只显示默认提醒信息(不显示自定义信息)。
触发于:
关闭浏览器窗口 通过地址栏或收藏夹前往其他页面的时候 点击返回,前进,刷新,主页其中一个的时候 点击 一个前往其他页面的url连接的时候 调用以下任意一个事件的时候:click,document write,document open,document close,window close ,window navigate ,window NavigateAndFind,location replace,location reload,form submit. 当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。 重新赋予location.href的值的时候。 通过input type=”submit”按钮提交一个具有指定action的表单的时候。
浏览器支持程度
目前主流浏览器都支持这两个事件属性
概述
onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行。 onbeforeunload也是在页面刷新或关闭时调用,onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取;而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。onunload是无法阻止页面的更新和关闭的,而 onbeforeunload 可以做到。
附:
页面加载时只执行onload
页面关闭时先执行onbeforeunload,最后onunload
页面刷新时先执行onbeforeunload,然后onunload,最后onload
附上部分效果图:
绑定body标签的代码:
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>测试</title> <script> function checkLeave(){ event.returnValue="确定离开当前页面吗?"; } </script> </head> <body onbeforeunload="checkLeave()"> 测试 </body></html>
谷歌浏览器下的效果:
点击刷新按钮:
点击返回按钮:
通过任务栏或者收藏夹前往其他界面:
关闭页面:
edge下的效果:
点击刷新按钮:
点击返回按钮:
关闭页面:
注:在新版的火狐浏览器(我是用的版本: 57.0 )里面,上面这种写法不生效?!
绑定window对象的代码:
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>测试</title> <script> window.onbeforeunload=function(e){ var e = window.event||e; e.returnValue=("确定离开当前页面吗?"); } </script> </head> <body> 测试 </body></html>
火狐下的效果:
点击刷新按钮:
点击返回按钮:
关闭页面:
注:这种方法在谷歌浏览、edge浏览器下仍适用,效果与第一种一样!
来源:https://www.cnblogs.com/slly/p/7991474.html
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- mysql binlog3种格式,row,mixed,statement. 解析工作mysqlbinlog --base64-output=
- 知识点这次我们使用python来打造一款间谍程序程序中会用到许多知识点,大致分为四块win32API 此处可以在MSDN上查看Python基
- import sysimport urllibfrom urllib import requestimport osfrom bs4 imp
- ASP中查询数据库记录写入XML文件示例,把下面代码保存为Asp_XML.asp运行即可: &
- 简单邮件传输协议(SMTP)是一种协议,用于在邮件服务器之间发送电子邮件和路由电子邮件。Python提供smtplib模块,该模块定义了一个
- 由于是上线的项目且已经按照数据逻辑去渲染了能看懂的看逻辑吧。有点多效果如图<template> <div class=&q
- 今天看到同事参与小米的抢购,几经数个星期的尝试,终于抢到了一台小米电视……看了一下小米的抢购流程,似乎可以用程序可破。于是想写点东西玩玩(你
- 前言Vue2.x 使用 EventBus 事件总线进行兄弟组件通信,而在Vue3中事件总线模式已经被移除,官方建议使用外
- 前 言在开发高并发系统时,我们可能会遇到接口访问频次过高,为了保证系统的高可用和稳定性,这时候就需要做流量限制,你可能是用的 Ng
- 1.文件的写入和读取#!/usr/bin/python # -*- coding: utf-8 -*- # Filename: using_
- Overview这篇博客内容将包括对XML文件的解析、追加新元素后写入到XML,以及更新原XML文件中某结点的值。使用的是python的xm
- 我们在使用bootstraptable做表格展示时,有时需要固定表格的高度当数据超出高度会出现滚动条,这时有可能出现表头列和数据列对不齐。出
- 说明:操作系统:Windows Server 2003MySQL版本:5.5.25MySQL程序安装目录:D:\Program Files\
- 前言需求是将两个list同时进行遍历,然后同步的将每个元素add到一个dict中,虽然有麻烦的方式,比如直接用list的数组下标可以实现,但
- 本文实例讲述了python和bash统计CPU利用率的方法。分享给大家供大家参考。具体如下:开始的时候写了一个 bash 的实现;因为最近也
- 一、什么是函数装饰器1.函数装饰器是Python提供的一种增强函数功能的标记函数;2.装饰器是可调用的函数对象,其参数是另一个函数(被装饰的
- 按照ant design vue官方说明,使用日期选择器需要在入口文件(main.js)全局设置语言:// 默认语言为 en-US,如果你需
- 处理json中不带双引号key问题在解析网页json数据的时候,我发现python标准库json模块无法加载数据。如下面数据import j
- 一 NULL 为什么这么经常用(1) java的nullnull是一个让人头疼的问题,比如java中的NullPointerExceptio
- 1、HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\Eventlog\Applicatio