一直以来,我都以为创建等待画面很难。但仔细想了下,并不难实现。
这理我用框架页面为例。框架页代码如下:
我们以可以找一个等待的动画。
当需要加载时,创建或显示此动画。比如通过按钮抓取数据时,触发创建此动画的方法(如:onclick="CreateWaitDiv()")。代码如下:
加载完成后(可以在被调用页面的使用onload事件,代码:onload="RemoveWaitDiv();"),删除或不显示此动画。
效果如下图:
![](https://images.cnblogs.com/cnblogs_com/scottckt/pic/Wait.JPG)
因为页面顶部一般不变更,将以上Js放入Js文件中可以供其它页面调用,这样就做到通用了。
这理我用框架页面为例。框架页代码如下:
<frameset oncontextmenu="return(false)" id="f1" onhelp="window.showHelp('help.htm');return false"
border="0" framespacing="0" rows="80,*,20,0" frameborder="NO" cols="*">
<%--Top 页面--%>
<frame id="topwin" src="FrmTopCustoms.aspx" scrolling="no">
<frameset id="middlewin" onhelp="window.showHelp('help.htm');return false" border="0"
framespacing="0" rows="*" frameborder="NO" cols="150,8,*">
<%--显示左边菜单页--%>
<frame name="leftwin" src="<%=Session["prDefaultMenu"].ToString()%>" noresize scrolling="auto">
<frame marginwidth="0" marginheight="0" src="FrmRightFrame.aspx" frameborder="0"
noresize scrolling="no">
<%--转到内容页面--%>
<frame name="content" src="Content.aspx" noresize scrolling="yes" style="overflow: hidden;
height: 100%; width: 100%;">
</frameset>
<%--Button页面--%>
<frame src="FrmBottom.aspx" noresize scrolling="no">
</frameset>
border="0" framespacing="0" rows="80,*,20,0" frameborder="NO" cols="*">
<%--Top 页面--%>
<frame id="topwin" src="FrmTopCustoms.aspx" scrolling="no">
<frameset id="middlewin" onhelp="window.showHelp('help.htm');return false" border="0"
framespacing="0" rows="*" frameborder="NO" cols="150,8,*">
<%--显示左边菜单页--%>
<frame name="leftwin" src="<%=Session["prDefaultMenu"].ToString()%>" noresize scrolling="auto">
<frame marginwidth="0" marginheight="0" src="FrmRightFrame.aspx" frameborder="0"
noresize scrolling="no">
<%--转到内容页面--%>
<frame name="content" src="Content.aspx" noresize scrolling="yes" style="overflow: hidden;
height: 100%; width: 100%;">
</frameset>
<%--Button页面--%>
<frame src="FrmBottom.aspx" noresize scrolling="no">
</frameset>
我们以可以找一个等待的动画。
当需要加载时,创建或显示此动画。比如通过按钮抓取数据时,触发创建此动画的方法(如:onclick="CreateWaitDiv()")。代码如下:
//创建一个等待
function CreateWaitDiv()
{
var vframe = self.parent.frames["topwin"];//顶边的框架
if(vframe!=null)
{
var vImg = document.createElement("img");
vImg.src='http://www.cnblogs.com/Images/HelpDeskImg/waiting.gif';//图片地址
vImg.id='imgWait';
with(vImg.style)
{
position = "absolute";
left = "600px";
top = "5px";
zIndex = "999";
}
//创建其中的Div
vframe.document.body.appendChild(vImg);
}
}
function CreateWaitDiv()
{
var vframe = self.parent.frames["topwin"];//顶边的框架
if(vframe!=null)
{
var vImg = document.createElement("img");
vImg.src='http://www.cnblogs.com/Images/HelpDeskImg/waiting.gif';//图片地址
vImg.id='imgWait';
with(vImg.style)
{
position = "absolute";
left = "600px";
top = "5px";
zIndex = "999";
}
//创建其中的Div
vframe.document.body.appendChild(vImg);
}
}
加载完成后(可以在被调用页面的使用onload事件,代码:onload="RemoveWaitDiv();"),删除或不显示此动画。
//册除等待
function RemoveWaitDiv()
{
var vframe = self.parent.frames["topwin"];//你的框架
if(vframe!=null)
{
var vImg=vframe.document.getElementById("imgWait");
if(vImg!=null)
{
//创建其中的Div
vframe.document.body.removeChild(vImg);
}
}
}
function RemoveWaitDiv()
{
var vframe = self.parent.frames["topwin"];//你的框架
if(vframe!=null)
{
var vImg=vframe.document.getElementById("imgWait");
if(vImg!=null)
{
//创建其中的Div
vframe.document.body.removeChild(vImg);
}
}
}
效果如下图: