JS实现 页面提交防刷新等待提示

 1 //关闭等待窗口
 2 function closediv() {
 3     //Close Div
 4     document.body.removeChild(document.getElementById("bgDiv"));
 5     document.getElementById("msgDiv").removeChild(document.getElementById("msgTitle"));
 6     document.body.removeChild(document.getElementById("msgDiv"));
 7 }
 8 //显示等待窗口
 9 function showdiv(str) {
10     var msgw, msgh, bordercolor;
11     msgw = 400; //提示窗口的宽度
12     msgh = 100; //提示窗口的高度
13     bordercolor = "#336699"; //提示窗口的边框颜色
14     titlecolor = "#99CCFF"; //提示窗口的标题颜色
15
16     var sWidth, sHeight;
17     sWidth = window.screen.availWidth;
18     sHeight = window.screen.availHeight;
19
20     var bgObj = document.createElement("div");
21     bgObj.setAttribute(‘id‘, ‘bgDiv‘);
22     bgObj.style.position = "absolute";
23     bgObj.style.top = "0";
24     bgObj.style.background = "#777";
25     bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
26     bgObj.style.opacity = "0.6";
27     bgObj.style.left = "0";
28     bgObj.style.width = sWidth + "px";
29     bgObj.style.height = sHeight + "px";
30     document.body.appendChild(bgObj);
31     var msgObj = document.createElement("div")
32     msgObj.setAttribute("id", "msgDiv");
33     msgObj.setAttribute("align", "center");
34     msgObj.style.position = "absolute";
35     msgObj.style.background = "white";
36     msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
37     msgObj.style.border = "1px solid " + bordercolor;
38     msgObj.style.width = msgw + "px";
39     msgObj.style.height = msgh + "px";
40     msgObj.style.top = (document.documentElement.scrollTop + (sHeight - msgh) / 2) + "px";
41     msgObj.style.left = (sWidth - msgw) / 2 + "px";
42     var title = document.createElement("h4");
43     title.setAttribute("id", "msgTitle");
44     title.setAttribute("align", "right");
45     title.style.margin = "0";
46     title.style.padding = "3px";
47     title.style.background = bordercolor;
48     title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
49     title.style.opacity = "0.75";
50     title.style.border = "1px solid " + bordercolor;
51     title.style.height = "18px";
52     title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";
53     title.style.color = "white";
54     //title.style.cursor = "pointer";
55     //title.innerHTML = "关闭";
56     //title.onclick = closediv;
57     document.body.appendChild(msgObj);
58     document.getElementById("msgDiv").appendChild(title);
59     var txt = document.createElement("p");
60     txt.style.margin = "1em 0"
61     txt.setAttribute("id", "msgTxt");
62     txt.innerHTML = str;
63     document.getElementById("msgDiv").appendChild(txt);
64 }
65 //屏蔽F5
66 document.onkeydown = mykeydown;
67 function mykeydown() {
68     if (event.keyCode == 116) //屏蔽F5刷新键
69     {
70         window.event.keyCode = 0;
71         return false;
72     }
73 }  

使用页面直接调用这个js文件,然后在按钮的onclick事件中填写:

<INPUT onclick="showdiv(‘表达数据提交中<br/>请稍候........ <br/> );"  type="button"  value="提交数据">

调用closediv()关闭

时间: 2024-10-25 06:31:51

JS实现 页面提交防刷新等待提示的相关文章

当页面关闭或刷新时提示用户

需求: 1.当页面关闭或刷新时提示用户是否已保存: 2.页面中的某些ajax操作成功后,如果需要刷新(window.location.reload())页面,但不需要提示用户是否已保存. 解决方法: 1)在页面加载后注册onbeforeunload事件,页面关闭前和刷新前都会触发onbeforeunload事件: //注册页面刷新和关闭提醒事件 window.onbeforeunload = function () { return "请确认信息是否已保存!"; }; 2)在相应的aj

子页面提交后刷新父页面问题

在弹出的子页面在做新增和修改操作时, 有时要对父页面进行刷新操作, 可以关闭子页面后刷新父页面, 也可以不关闭子页面刷新父页面,在网上查到了方法, 在这里记一下,方便以后的学习查找. 一. 弹出子页面关闭刷新父页面: 在父页面js中回调window.opener.location.reload(); <script language=JavaScript> window.opener.location.reload(); </script> 二. 不关闭子页面刷新父页面: 在子页面

竖向折叠二级导航JS代码(可防刷新ul/li结构)

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>      <style type="text/css">         *{margin:0;padding:0;border:0;}        body         {         font-family:

ExtJs 4中 Ext.Ajax.request提交实现waitMsg等待提示效果

//submitForm为form表单 var myMask = new Ext.LoadMask(Ext.getBody(),{msg:"请稍等,正在导入..."}); myMask.show(); Ext.Ajax.request({ url:"uploadAction", method:"POST", params:{ id:id }, success:function(){ if (myMask != undefined){ myMask

JS弹出框、对话框、提示框,JS关闭窗口、关闭页面和JS控制页面跳转

一.JS弹出框.对话框.提示框 //====================== JS最常用三种弹出对话框 ======================== //1弹出对话框并输出一段提示信息 function ale() { //弹出一个对话框 alert("提示信息!"); } //2弹出一个询问框,有确定和取消按钮 function firm() { //利用对话框返回的值 (true 或者 false) if (confirm("你确定提交吗?")) { a

总结JS实现页面的刷新和跳转

使用iframe.弹出子页面刷新父页面iframeparent.location.reload(); 弹出子页面window.opener.location.reload();--这个方法是我尝试过的,可以成功实现我想要的功能,其他的没有尝试,不能保证绝对的正确. 子窗口刷新父窗口 self.window.opener.locaction.reload(); 刷新一open()方法打开的窗口 window.opener.location.href = window.opener.location

JS实现页面刷新方法

1,reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet])  参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页.true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") 2,replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后退”来访问已经被替换的URL. 语法: loca

js实现页面刷新

1. reload reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页.true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") reload() 方法用于重新加载当前文档.如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已

页面提交后不刷新

问题一:项目中使用dwz进行弹框和页面跳转,主档为第一个页面,选择一条主档数据点击按钮查看明细,弹出第二个页面明细页面(该页面弹出框),在第二个页面总点击添加按钮,弹出第三个页面添加页面,在添加页面中添加数据成功后,自动关闭当前添加页面回到第二个页面明细页面,这时明细页面没有刷新(刷新了第一个页面)解决办法(已解决,在项目controller层中方法末尾加上ajaxObject.setMessage("退回成功");这句代码后,会自动关闭弹框): 1 //在第二个页面中增加一个查询表单