如何通过iframe来实现导入导出的效果
iframe标签会创建包含另外一个文档的内联框架,跟当前window框架是父子关系,利用iframe,我们可以处理异步无刷新上传、下载文件;通常下载文件利用window.open(downloadUrl)的方式进行,这样打开的弹窗可能会被拦截,而且文件下载完成后,会有空白的界面不会自动关闭等问题;
操作方法
- 01
我们先说下载吧,思路是创建一个隐藏的iframe,支持动态指定url实现下载文件流数据。
- 02
【下载】封装一个公共方法,如下图,第一次调用没有创建iframe标签,第二次调用直接执行url,刷新页面。框架会自动跟浏览器通信,如果是文件就会弹出保存文件的窗口,但不会新建空白页面。 需要注意的是,这个iframe需要是隐藏的,不影响当前主页面的布局。 iframe.className = "dnone"; 样式表->.dnode{display:none}
- 03
【下载】业务使用方法 download("http://www.xx.com/a.zip"); download("/a/b/c/abc.exe");
- 04
【下载】上面已经能满足基本的下载功能了。但是,如果页面url不是文件流的请求,而是动态页面呢?比如http://www.abc.com/a.aspx?id=1 这样的页面,如果服务器能正常处理请求并返回文件流(content-type标识),那就没什么问题。但如果是a.aspx出现了异常情况,客户端点击了下载,什么反应都没有,提示也没得,因为现实的url是在一个隐藏的iframe中,这个iframe对用户来说不可见。
- 05
【下载】这个问题怎么破? 思路是:通过js获取到ifarme的数据,解析子页面返回数据,然后主动提示用户。 this._downloadIframe.onload = function(e){ // to do }
- 06
【上传】上传类似下载的思路( 请参考下载),只是多一个form标签的操作。 如下图,关联form上传表单和iframe之前的关系,通过target属性,这样表单提交的文件数据,是直接传到iframe的。
- 07
【上传】验证上传之后的结果信息,也要监听iframe的onload事件,然后完成解析html的逻辑。