最近在项目中经常用到模态窗口(showModalDialog),客户需要在一个模态窗口中有"生成Excel报表"并"导出"的功能。
功能的设计思路是这样的:
1、首先在主窗口收集一些需要的数据
2、showModalDialog,将收集的数据传递过去,在模态页面使用window.dialogArguments接收这些参数
3、在模态页面收集客户的个性化定制信息
4、客户点击模态页面上的提交按钮,页面将请求通过Ajax异步方式提交到后台,生成文件,返回文件在服务器上的绝对路径
5、模态页面将内置的一个隐藏的iframe的src先置空,然后将文件路径作为参数传给下载页面,通过流方式下载文件
把基本流程完成之后,测试一下。点击提交按钮,前台没有任何反应。根据后台日志,又确定文件已经生成、成功读取并往流中写出了。
这是什么原因呢?
Google了很久,基本上只有以下两种答案:
1、模态窗口的定向问题
引用页:http://hi.baidu.com/037123/blog/item/e379854da9d561f3d62afc0c.html
showDialog里好像不能用href,只能用onclick
最近在项目中经常用到模态窗口(showModalDialog),客户需要在一个模态窗口中有"生成Excel报表"并"导出"的功能。接到任务后,直接就开始按常规操作实现。
在按钮的Click事件中,根据模板生成Excel报表,填充数据,保存到临时文件夹,然后用Response.WriteFile函数输出文件,一切看上去都很顺利。代码如下:
//根据数据集创建Excel报表并返回Excel报表路径
string fileName = CreateExcel(ds);
Response.Clear();
Response.Charset = "utf-8";
Response.Buffer = true;
this.EnableViewState = false;
Response.ContentEncoding = System.Text.Encoding.UTF8;
Response.AppendHeader("Content-Disposition", "attachment;filename=" + HttpUtility.UrlEncode(fileName, System.Text.Encoding.UTF8));
//设置输出文件类型为excel文件。
Response.ContentType = "application/ms-excel";
Response.WriteFile(fileName);
Response.Flush();
Response.Close();
Response.End();
但是当完成了代码,开始测试的时候,却发现点击"导出"按钮没有反应。开始的时候以为是创建Excel报表的代码有问题,但经过调试后,证实创建Excel代码没有问题,也成功的在临时文件夹下生成了Excel报表,但是却没有"导出"报表(没弹出下载文件对话框)。再看输出文件的代码,应该也没有问题,之前一直这样输出都没有问题的。
在百思不得其解的时候,发现了一个关键点。就是之前输出文件成功的面页都是一般的网页窗口,而这次的操作却是在模态窗口中。问题会不会出在这里呢?赶紧试验了一下。把模态窗口改成了一般的网页窗口,果然可以输出文件没问题,也成功下载了报表。
虽然问题有点怪异,但找到了切入点和问题的关键所在,解决应该就不难了。google一下,发现模态窗口定义了<base target="_self">,这应该是问题所在。然后在页面中重新定义了这个标签,改成了<base target="_blank">,问题成功解决,文件可以正常下载了。但这时候又来了新的问题,下载是可以了,但是却会弹出一个新页面,在模态窗口中下载再弹出页面肯定影响了用户体验。有没有方法在模态窗口中直接下载而不弹出新的页面呢?既然target=_self的时候有问题,target=_blank的时候又会弹出新的页面,这让我想到了在框架中打开新窗口的做法。在页面中加一个看不到的框架,然后把target设为框架名应该可以解决。随后在页面中再加了一个大小为0的iframe
<iframe id="download" name="download" height="0px" width="0px"></iframe><!--用iframe模拟文件下载-->
然后重新修改<base>标签target为框架名:
<base target="download">
重新生成,浏览,测试。问题成功解决。
2、JS脚本问题
引用页:http://hi.baidu.com/%C0%D6%D0%CD%D5%DF/blog/item/f5422a11311f60d3a6ef3fc1.html
var obj=document.getElementById(‘download’);
obj.contentWindow.location.href=http://sunyoush.iteye.com/blog/url;
这两种方式我都试过了,都不行。最后功夫不负有心人,在Windows的升级信息中找到了答案:
主要是浏览器对于异步访问的问题,将原来的异步调用改成同步调用的,就可以了
引用页:http://bbs.blueidea.com/viewthread.php?tid=1708871&page=
如果异步请求信息,您的 Web 站点是否会打开一个新窗口?
如果站点在异步请求信息后打开特定的窗口,则 Internet Explorer 可能会阻止这些窗口,即使用户单击了链接以打开该窗口。如果在请求异步信息之前,直接从用户启动的操作(鼠标单击)打开窗口,那么这些窗口不会被阻止。用户启动的操作不能跨导航保持。
分享到:
相关推荐
Selenium目前没有提供对IE模态对话框(即通过showModalDialog方法打开的弹出对话框)的处理。原因在于,模态对话框会将父页面的 JS挂起,直至对话框处理完毕才会继续执行父页面JS。因为Selenium的底层实现是基于JS的,...
showModalDialog是jswindow对象的一个方法,和window.open一样都是打开一个新的页面。区别是:showModalDialog打开子窗口后,父窗口就不能获取焦点了(也就是无法操作了)
javascript中showModalDialog子页面值赋给父页面 并解析json格式的值
上个礼拜修改测试一个后台管理项目,在测试与各个浏览器兼容性的时候,发现在chrome浏览器下showModalDialog方法显示的并不是模态对话框,就像新打开一个页面一样,父窗口仍然可以随意获取焦点,并可以打开多个窗体...
忽然发现Chrome浏览器版本 37.0.2062.103 m 不支持showModalDialog模态对话框和无法返回returnValue 项目原先用到的都不能正常执行 找了个折中方案利用window.open代替showModalDialog利用 window.opener.document来...
使用javascript打开模态对话框,想学习showModalDialog使用方法的朋友可以参考下。
解决showModalDialog 跨域 iframe
NULL 博文链接:https://crabdave.iteye.com/blog/269954
本人总结和转摘的 有关 JavaScript 页面刷新和 模态对话框的总结知识,这几天用到了不少, 上传,大家共享共进步。 以后还会有更多的 JavaScript 学习知识相关总结。 都为原创。。
chrome中弹出模态对话框,通过window.returnValue赋返回值关闭后,有的情况下无法取得返回值。
在第N(N>1)层的模态页面中,如果想链接到其他页面或者刷新当前页,只能用 window.name = “__self”; window.open[removed].href, “__self”) //注意是2个下划线 替换 location.href 当需要关闭第N(N>1)层的模态...
showModalDialog及dialogArguments使用
showModalDialog和showModelessDialog使用心得
主页面用window.showModalDialog的时候,如果直接打开其它系统的页面,这时候别人的页面在window.returnValue=1;这样返回值的时候,主页面是取不到返回值的,原因就是因为跨域了.
JS中showModalDialog 详细使用 基本介绍: showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.showModalDialog() 方法用来创建一个显示HTML内容的模态对话框。 window....