朋友的项目里有这样一个要求，一个按钮按下后，同时出现四个csv文件下载。我们当然可以用window.open()打开4个新窗口来下载，但一下载蹦出很多页面，客户可能就不喜欢了。我本来想，那用隐藏的IFrame不就没问题了，事实没有这么简单。我们看一下如下的代码：
<script language="javascript">
function download(){
document.all.frmHid1.src = "";
document.all.frmHid1.src = "File.aspx?id=1";
document.all.frmHid2.src = "";
document.all.frmHid2.src = "File.aspx?id=2";
}
</script>
<input type="button" id="btnDownload1" value="Click Me To Download" onclick="download();"/>
<iframe id="frmHid1" frameborder="no" src="" width="0" height="0"></iframe>
<iframe id="frmHid2" frameborder="no" src="" width="0" height="0"></iframe>
这里为了避免用同一个IFrame必须一个一个下，而且还要判断frame.readyState，使用了多个IFrame。本以为这样就可以多个下载窗口同时弹出来了，不过实际运行起来，却一直只能弹出一个下载窗口。而且还是随机的，可能是 File1，也可能是 File2。中间我还尝试了很多其它的方法，不过都是这个样子。我猜想这可能是因为每个页面窗体(window)同一时间只允许一个下载确认窗体，而这个窗体是模式窗口。用window.open()因为是开辟了多个新的页面窗体，所以不存在这个问题。这样如果我们执意不弹出新窗口，而非要使用IFrame的话，要同时蹦出多个下载窗口是不可能了。
那我们退而求其次，就让下载完一个文件后，再蹦出下一个吧。但这里又有一个问题，我们用普通的frame.readyState来判断一个文件是否下载完(确切说是下载确认窗体关闭），是做不到的。所以经过研究，我目前找到一种方法可以判断这个下载确认窗体的状态，那就是通过页面的焦点离开或者焦点得到的事件。
具体的实现大家看一下下面的演示代码就可以了。如果谁有其他的好的实现方法，欢迎和我交流:)
====================Main.aspx===========================
<html>
<head>
<script language="javascript">
// 用于标记下载状态，'0'为初始值, '1' 为准备开始下载, '2' 为窗口焦点已离开,即下载窗口已弹出
var downloadStatus = 0;
var downloadIndex = 0; // 当前下载文件索引
var downloadCount = 2; // 总下载文件数
window.onblur = function(){ // 如果状态标志是'准备开始下载'，可以理解为因为下载窗口弹出而失去焦点
if ( downloadStatus == 1 )
downloadStatus = 2; // 下载窗口弹出状态
}
window.onfocus = function(){
// 得到焦点时，如果状态标志是'下载窗口弹出'，可以理解为下载窗口关闭后重新得到焦点
// 此时如果还有没下载的，继续下载下一个文件
if ( downloadStatus == 2 && downloadIndex < downloadCount - 1 ) {
download(downloadIndex+1); // 继续下载下一个
} else if (downloadIndex == downloadCount-1) { // 全部文件已下载，恢复状态
downloadStatus = 0;
downloadIndex = 0;
}
}
function download(index){
downloadStatus = 1;
downloadIndex = index;
document.all.frmHid.src = "";
document.all.frmHid.src = "File.aspx?id=" + index;
}
</script>
</head>
<body>
Multy Download Sample<br />
<br />
<input type="button" id="btnDownload" value="Click Me To Download" onclick="download(0);"/>
<iframe id="frmHid" frameborder="no" src="" width="0" height="0"></iframe>
</body>
</html>
====================File.aspx===========================
<%@ Page Language="VB" %>
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Dim id As String = Request.QueryString("id")
Response.Clear()
Response.ContentType = "text/plain"
Response.AppendHeader("Content-Disposition", "attachment; filename=TestFile" & id & ".txt")
Response.Write("You requested " & id)
Response.End()
End Sub
</script>
<script language="javascript">
function download(){
document.all.frmHid1.src = "";
document.all.frmHid1.src = "File.aspx?id=1";
document.all.frmHid2.src = "";
document.all.frmHid2.src = "File.aspx?id=2";
}
</script>
<input type="button" id="btnDownload1" value="Click Me To Download" onclick="download();"/>
<iframe id="frmHid1" frameborder="no" src="" width="0" height="0"></iframe>
<iframe id="frmHid2" frameborder="no" src="" width="0" height="0"></iframe>
这里为了避免用同一个IFrame必须一个一个下，而且还要判断frame.readyState，使用了多个IFrame。本以为这样就可以多个下载窗口同时弹出来了，不过实际运行起来，却一直只能弹出一个下载窗口。而且还是随机的，可能是 File1，也可能是 File2。中间我还尝试了很多其它的方法，不过都是这个样子。我猜想这可能是因为每个页面窗体(window)同一时间只允许一个下载确认窗体，而这个窗体是模式窗口。用window.open()因为是开辟了多个新的页面窗体，所以不存在这个问题。这样如果我们执意不弹出新窗口，而非要使用IFrame的话，要同时蹦出多个下载窗口是不可能了。
那我们退而求其次，就让下载完一个文件后，再蹦出下一个吧。但这里又有一个问题，我们用普通的frame.readyState来判断一个文件是否下载完(确切说是下载确认窗体关闭），是做不到的。所以经过研究，我目前找到一种方法可以判断这个下载确认窗体的状态，那就是通过页面的焦点离开或者焦点得到的事件。
具体的实现大家看一下下面的演示代码就可以了。如果谁有其他的好的实现方法，欢迎和我交流:)
====================Main.aspx===========================
<html>
<head>
<script language="javascript">
// 用于标记下载状态，'0'为初始值, '1' 为准备开始下载, '2' 为窗口焦点已离开,即下载窗口已弹出
var downloadStatus = 0;
var downloadIndex = 0; // 当前下载文件索引
var downloadCount = 2; // 总下载文件数
window.onblur = function(){ // 如果状态标志是'准备开始下载'，可以理解为因为下载窗口弹出而失去焦点
if ( downloadStatus == 1 )
downloadStatus = 2; // 下载窗口弹出状态
}
window.onfocus = function(){
// 得到焦点时，如果状态标志是'下载窗口弹出'，可以理解为下载窗口关闭后重新得到焦点
// 此时如果还有没下载的，继续下载下一个文件
if ( downloadStatus == 2 && downloadIndex < downloadCount - 1 ) {
download(downloadIndex+1); // 继续下载下一个
} else if (downloadIndex == downloadCount-1) { // 全部文件已下载，恢复状态
downloadStatus = 0;
downloadIndex = 0;
}
}
function download(index){
downloadStatus = 1;
downloadIndex = index;
document.all.frmHid.src = "";
document.all.frmHid.src = "File.aspx?id=" + index;
}
</script>
</head>
<body>
Multy Download Sample<br />
<br />
<input type="button" id="btnDownload" value="Click Me To Download" onclick="download(0);"/>
<iframe id="frmHid" frameborder="no" src="" width="0" height="0"></iframe>
</body>
</html>
====================File.aspx===========================
<%@ Page Language="VB" %>
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Dim id As String = Request.QueryString("id")
Response.Clear()
Response.ContentType = "text/plain"
Response.AppendHeader("Content-Disposition", "attachment; filename=TestFile" & id & ".txt")
Response.Write("You requested " & id)
Response.End()
End Sub
</script>
