编辑页面离开提醒:“您的内容已改变,是否保存修改”

1.添加window.onbeforeunload函数

<script language=”javascript”>
function   window.onbeforeunload(){
event.returnValue = “页面值已经修改,是否真的不保存?”;  //提示内容
}
</script>

2.如何避免进行提交时也错误的进行离开提醒呢?

(1)在表单中建立一个hidden的对象,用来判断是否点击了提交按钮,默认值为0

<input type=”hidden” name=”clickonsub” value=”0″ />

(2)在onsubmit或其它提交验证函数的最后,即验证结束,开始提交之前把这个对象赋值为1

document.release.clickonsub.value=”1″;   //供离开页面提醒用

(3)把window.onbeforeunload函数修改为如下样式,即增加对这个对象值的判断,为1时才提醒

<script language=”javascript”>
function   window.onbeforeunload(){
if(document.release.clickonsub.value==0){
event.returnValue = “页面值已经修改,是否真的不保存?”;  //提示内容
}
}
</script>

(4)还可以增加页面内容是否修改的判断

3.其它问题,网上有人这样说,但我没发现有这问题

引起当前页面发生跳转主要3类事件:
1、对浏览器窗口的操作,比如关闭浏览器、go home、backward、forward和refresh等;
2、对于网页的Navigatie操作,比如点击链接、在地址栏中执行新的地址、页面表单提交到非当前页面等;
3、脚本代码引起的页面Navigate操作,比如执行navigate、locatoin方法(replace, reload, assign)和修改location属性(href, search)等。
以上的1-2类操作引起onbeforeunload的事件,使用起来基本没有任何的问题,可是执行第3类页面条转操作却有点小问题。就是在上图的窗口出 现后,如果点选”OK”,确实就OK,页面正确跳转了。可是如果这个时候,我们点选”Cancel”,却会出现一个脚本异常

解决方法就是把脚本调用try一下,但这似乎是IE的一个bug的说。

编辑页面离开提醒 try
编辑页面离开提醒 编辑页面离开提醒 编辑页面离开提醒 {
编辑页面离开提醒 //  编辑页面离开提醒
编辑页面离开提醒 event.returnValue = ”You will lose any unsaved content”;
编辑页面离开提醒 //  编辑页面离开提醒
编辑页面离开提醒 }
编辑页面离开提醒 编辑页面离开提醒 catch(e) 编辑页面离开提醒 {}

4.本人的实例代码

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd “>
<html xmlns=”http://www.w3.org/1999/xhtml “>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>无标题文档</title>
<script language=”javascript”>
function   window.onbeforeunload(){
if(document.release.title.value!=”" && document.release.clickonsub.value==0){
event.returnValue = “即将离开页面,是否真的不保存?”;
}
}
</script>

</head>

<body>
<div style=”width:480px; margin:100px auto”>
<p style=”text-align:center;”>内容为空则不提醒,内容非空则离开提醒,点击提交按钮则不提醒</p><br /><br /><br />
<p style=”float:right; margin-right:60px;”><a href=”http://hi.baidu.com/tjt999 “>离开测试</a></p>
<p style=”float:left; margin-left:60px;”><form action=”a.php” method=”post” name=”release” enctype=”multipart/form-data”>
<input type=”text” name=”title” />
<input type=”hidden” name=”clickonsub” value=”0″ />
<input type=”submit” value=”提交” onclick=”return check()” />
</form>
</p>
</div>
</body>
</html>

<script language=”javascript”>
function check(){
if(document.release.title.value==”"){
alert(“内容不能为空”);
return false;
}
document.release.clickonsub.value=1;
return true;
}
</script>
 

你可能感兴趣的:(JavaScript,XHTML,浏览器,脚本,IE)