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

系统使用中，常常会遇到网速过慢这样那么的情况，如果你的提交没有做验证或者特殊处理很容易造成重复提交，产生冗余数据或者系统出错。我的解决方法是，页面表单提交时，如果有等待时间，那么页面上会弹出一个提示框告诉用户系统数据正在提交，请耐心等待，同时屏蔽页面，然用户不能继续操作，从而有效方式用户重复提交。

      下面就写出这个JS文件：

//关闭等待窗口

function closediv() {

    //Close Div

    document.body.removeChild(document.getElementById("bgDiv"));

    document.getElementById("msgDiv").removeChild(document.getElementById("msgTitle"));

    document.body.removeChild(document.getElementById("msgDiv"));

}

//显示等待窗口

function showdiv(str) {

    var msgw, msgh, bordercolor;

    msgw = 400; //提示窗口的宽度

    msgh = 100; //提示窗口的高度

    bordercolor = "#336699";//提示窗口的边框颜色

    titlecolor = "#99CCFF";//提示窗口的标题颜色

 

    var sWidth, sHeight;

    sWidth = window.screen.availWidth;

    sHeight = window.screen.availHeight;

 

    var bgObj = document.createElement("div");

    bgObj.setAttribute('id','bgDiv');

    bgObj.style.position = "absolute";

    bgObj.style.top = "0";

    bgObj.style.background = "#777";

    bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";

    bgObj.style.opacity = "0.6";

    bgObj.style.left = "0";

    bgObj.style.width = sWidth + "px";

    bgObj.style.height = sHeight + "px";

    document.body.appendChild(bgObj);

    var msgObj = document.createElement("div")

    msgObj.setAttribute("id","msgDiv");

    msgObj.setAttribute("align","center");

    msgObj.style.position = "absolute";

    msgObj.style.background = "white";

    msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";

    msgObj.style.border = "1px solid " + bordercolor;

    msgObj.style.width = msgw + "px";

    msgObj.style.height = msgh + "px";

    msgObj.style.top = (document.documentElement.scrollTop + (sHeight - msgh) / 2) + "px";

    msgObj.style.left = (sWidth - msgw) / 2 + "px";

    var title = document.createElement("h4");

    title.setAttribute("id","msgTitle");

    title.setAttribute("align","right");

    title.style.margin = "0";

    title.style.padding = "3px";

    title.style.background = bordercolor;

    title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";

    title.style.opacity = "0.75";

    title.style.border = "1px solid " + bordercolor;

    title.style.height = "18px";

    title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";

    title.style.color = "white";

    //title.style.cursor = "pointer";

    //title.innerHTML = "关闭";

    //title.onclick = closediv;

    document.body.appendChild(msgObj);

    document.getElementById("msgDiv").appendChild(title);

    var txt = document.createElement("p");

    txt.style.margin = "1em 0"

    txt.setAttribute("id","msgTxt");

    txt.innerHTML = str;

    document.getElementById("msgDiv").appendChild(txt);

}

//屏蔽F5

document.onkeydown = mykeydown;

function mykeydown() {

    if (event.keyCode == 116) //屏蔽F5刷新键  

    {

        window.event.keyCode = 0;

        return false;

    }

} 

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

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