JavaScript 离开页面提醒,在编辑页面常用的关闭提醒功能

在一些页面中,用户在退出前需要提示用户是否已经保存当前页面的内容,以达到防止数据丢失的目的!

我们可以通过 onbeforeunload  事件来实现这个功能

关闭窗口或者按下F5的时候触发"onbeforeunload" 事件

定义和用法

onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发。

该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面。

对话框默认的提示信息根据不同的浏览器有所不同,标准的信息类似 "确定要离开此页吗?"。该信息不能删除。

但你可以自定义一些消息提示与标准信息一起显示在对话框。

注意: 如果你没有在 <body> 元素上指定 onbeforeunload 事件,则需要在 window 对象上添加事件,并使用 returnValue 属性创建自定义信息(查看以下语法实例)。

注意: 在 Firefox 浏览器中,只显示默认提醒信息(不显示自定义信息)。

方法一:

 <script type="text/javascript">
 	window.onbeforeunload = function() {
    	return "确认离开当前页面吗?未保存的数据将会丢失";
	}
 </script>

方法二:

<!DOCTYPE html>
<html>
<body onbeforeunload="return myfunction()">

<p>该实例演示了如何向 body 元素添加 "onbeforeunload" 事件。</p>

<p>关闭当前窗口,按下 F5 或点击以下链接触发 onbeforeunload 事件。</p>

<a href="http://www.w3cschool.cc">点击调整到w3cschool.cc</a>

<script>
function myfunction() {
    return "确认离开当前页面吗?未保存的数据将会丢失";
}
</script>

</body>
</html>

浏览器支持情况

表格中的数字表示支持该事件的第一个浏览器的版本号。

扩展

当然如果只是使用onbeforeunload  事件是满足不了需求的,因为这样处理在提交表单的时候也会出现关闭提示,这样就很不友好了。

一个解决思路就是在表单提交的之前取消这个事件。

代码如下:

<form method="post" action="http://www.baidu.com" onsubmit="return destroy()" >
	<input type="submit" value="提交"  />
</form>

 </body>

 <script type="text/javascript">
 	window.onbeforeunload = function() {
    	return "确认离开当前页面吗?未保存的数据将会丢失";
	}

	/**
	*提交表单前销毁提醒事件
	*/
	function destroy(){

		window.onbeforeunload = null;
	}
 </script>
时间: 11-28

JavaScript 离开页面提醒,在编辑页面常用的关闭提醒功能的相关文章

JavaScript当离开页面时可以进行的操作

当JavaScript离开页面时可以进行的操作 window.onbeforeunload = function() { var email = document.getElementById("email").value; if(!email) return "确定"; } 全部代码如下: <%@page language="java" import="java.util.*" pageEncoding="U

【JavaScript】离开页面前提示

离开页面前的提示不能够用onunload去做,由于它仅仅是兼容IE,你要兼容Google与FireFox就蛋疼了. 并且这个事件还是关闭之后才会触发的. 取而代之能够用onbeforeunload去实现. onbeforeunload能够在用户关闭或刷新窗体.或者点击本页内的不论什么超级链接都会触发的. 其JavaScript代码例如以下: <script> window.onbeforeunload=function(e){ var e=window.event||e; e.returnVa

【转】js监听浏览器离开页面操作

[转]https://www.cnblogs.com/slly/p/7991474.html 序言 大家是否经常遇到在关闭网页的时候,会看到一个确定是否离开当前页面的提示框?想一些在线测试系统.信息录入系统等就经常会有这一些提示,避免用户有意或者无意中关掉了页面,导致数据丢失.这里面的实现过程很简单,利用了HTML DOM事件中的onunload和onbeforeunload方法. unload 事件属性 定义:当用户卸载文档时执行一段 JavaScript,例如: // body<body o

如何使用JavaScript快速的创建一种常用类型的导航组件:sidebar

本文标签: JavaScript小技巧 JavaScript JavaScript函数 JavaScript处理sidebar JavaScript导航组件 sidebar是一种常用类型的导航组件,它可从页面旁侧弹出,覆盖在正常内容上. 假设你的正常内容为: <div id="main"> Placeholder<p> Placeholder<p> Placeholder<p> </div> 现在我们可以在内容内加入sideb

React + antd 组件离开页面以后出现Can only update a mounted or mounting component 的解决办法

做项目的过程中,来回切换页面时,一直遇到Can only update a mounted or mounting component 这个问题,原因是当离开页面以后,组件已经被卸载,执行setState时无法找到渲染组件. 解决办法特别简单,在离开页面时的周期函数(componentWillUnmount)中: //组件将被卸载 componentWillUnmount(){ //重写组件的setState方法,直接返回空 this.setState = (state,callback)=>{

VUE 离开页面路由拦截

业务场景 在页面内容被编辑后,用户跳转其他路由,需要提示用户:当前页面有改动,确认离开后再进行跳转,以防编辑数据丢失. 代码 beforeRouteLeave (to, from, next) { this.targetName = to.name // 提示框点击确认后跳转的 路由 if (this.checkEdit()) { // 是否对页面进行了编辑 this.dialogVisible = true // 打开离开页面的提示框 next(false) } else { this.dia

JavaScript 实现页面元素(ul-li)的简单排序

JavaScript 实现页面元素(ul-li)的简单排序 html页面: <input type="button" value="show" onclick="show()" /> <ul id="ul1"> <li>4</li> <li>3</li> <li>2</li> <li>1</li> </

[转载]用Javascript获取页面元素的位置

原文地址:http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html 制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和CSS样式表决定. 浏览器窗口的大小,则是指在浏览器窗口中看到的那

javascript 获取页面高度(多种浏览器)(转)

关于获取各种浏览器可见窗口大小的一点点研究 <script> function getInfo() { var s = ""; s += " 网页可见区域宽:"+ document.body.clientWidth; s += " 网页可见区域高:"+ document.body.clientHeight; s += " 网页可见区域宽:"+ document.body.offsetWidth + " (