在我们平常使用的Form 之外,添加了一个iframe。
<iframe id="yhnh" name="yhnh" src="about:blank" width="0" height="0" frameborder="0" scrolling="no"></iframe>
设置Form的target属性
<html:form action="/yhnhShip.do?method=doAdd" target="yhnh">
这样,提交的时候,页面不会跳转。服务端工作由这个iframe来完成。
提交时将本页面用一个层锁定。并且显示提示信息。
<!-- 锁定层后面所有控件-->
<div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;z-index: 2; left: 0px; display: none;"></div>
!-- 浮层框架开始 -->
<div id="Layer2" align="center" style="position: absolute; z-index: 3; left: expression((document.body.offsetWidth-540)/2); top: expression((document.body.offsetHeight-170)/2);
background-color: #fff; display: none;" >
<table width="300" border="0" cellpadding="2" cellspacing="2" style="border:0 solid #e7e3e7; border-collapse: collapse">
<tr>
<td style="background-color: #73A2d6; color: #fff; padding-left: 4px; padding-top: 2px;
font-weight: bold; font-size: 14px;" height="25px" valign="middle">请稍候...</td>
</tr>
<tr valign="bottom">
<td height="27" align="center"> </td>
</tr>
<tr valign="bottom">
<td align="center" >正在进行服务端处理 ...</td>
</tr>
<tr valign="bottom">
<td align="center" ><img src="../images/working.gif" /></td>
</tr>
<tr valign="bottom">
<td height="27" align="center"> </td>
</tr>
</table>
</div>
<!-- 浮层框架结束 -->
锁定页面JS的方法:
//锁定页面控件,并弹出浮动层 function locking_control(){ $('ly').style.display="block"; $('ly').style.width = document.body.clientWidth; $('ly').style.height = document.body.clientHeight; $('Layer2').style.display = 'block'; } // 关闭浮动层 function close_div () { $('ly').style.display='none'; $('Layer2').style.display='none'; }
体验效果如下:
返回的页面也在iframe之中。
在这页面加载处理错误信息,返回成功信息等操作。
function init() { var error = $("error").value.strip(); if (error.length > 0) { alert(error); if (window.parent) { window.parent.saveFail(policy); } } else { if (window.parent) { window.parent.saveSuccess(policy); } } }
成功返回后,禁止原页面的表单,成为预览方式。
/* * 禁用表单 */ function disableForm() { var form = $('yhnhShipForm'); form.disable(); form.disabled = true; }