方案1：灰掉按钮

预期效果：

点“查询”按钮时，按钮灰掉，出来查询结果后，按钮恢复

 

实现方式：

<input type="button" id="qrybutton"  value=" 查 询 " onclick="javascript:check1(document.queryForm1); return false;">

 

查询提交后，用下面的代码灰掉按钮

document.getElementById("qrybutton").disabled = true;

 

在结果页面，用下面代码重新激活

window.parent.document.getElementById("qrybutton").disabled = false;

 

优点：客户体验较好

缺点：需要为每个按钮定义id，并在在两个页面控制按钮的是否可用，代码不够简洁

 

方案2：等待页面showwaiting方法

预期效果：

点“查询”按钮，出现等待框，查询结果出来，等待框消失

 

实现方式：

wait.jsp已经包含showWaiting()、hideWaiting() 两个方法，分别控制waiting、cover 两个属性的显示与否，但他们控制的都是同一个页面的对象，现增加第三个方法：hideParentWaiting（） 用来控制父页面的等待对象。

使用时在查询提交之后调用showWaiting()方法，在结果页面进入时执行hideParentWaiting()方法即可。

注意：使用到这些方法的页面，都必须引入wait.jsp

 

使用实例：

查询条件页面：

<%@include file="/internet/wait.jsp" %>

check(frm);

showWaiting();

 

结果页面：

<script language="javascript">

hideParentWaiting();

</script>

 

wait.jsp:

<script language=javascript>

 

function showWaiting() {

waiting.style.visibility="visible";

cover.style.visibility="visible";

}

 

function hideWaiting() {

waiting.style.visibility="hidden";

cover.style.visibility="hidden";

}

function hideParentWaiting() {

window.parent.document.all.waiting.style.visibility="hidden";

window.parent.document.all.cover.style.visibility="hidden";

}

</script>

<div id="waiting" style="position:absolute; top:200; left:20; z-index:10; visibility:hidden">

<TABLE WIDTH=100% BORDER=0 CELLSPACING=0 CELLPADDING=0>

<TR>

<td width=30%></td>

<TD bgcolor=#2073AB>

<TABLE WIDTH=100% height=70 BORDER=0 CELLSPACING=2 CELLPADDING=0>

<TR>

<td bgcolor=#E3ECF1 align=center id=progress>处理中，请稍候...</td>

</tr>

</table>

</td>

<td width=30%></td>

</tr>

</table>

</div>

<div id="cover" style="position:absolute; top:0; left:0; z-index:9; visibility:hidden">

<TABLE WIDTH=100% height=600 BORDER=0 CELLSPACING=0 CELLPADDING=0>

<TR>

<TD align=center><br>

</td>

</tr>

</table>

</div>