如何通过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的逻辑。

(0)

相关推荐

  • windows8下IE浏览器实现漫游收藏夹(避免来回导入导出网址和历史记录)

    IE浏览器今天发布了关于Win8 下 IE浏览器实现漫游收藏夹的教程。这样一来就不必每次都在新电脑上来回导入导出网址和历史记录。只需在Windows8中登陆您的Microsoft账户就能实时同步IE1 ...

  • 用Navicat for MySQL进行数据库的导入导出 图文方法

    当时的处理是复制数据库文件夹给机房的服务器。 看见灰色的insert into 了吗,因为某字段里含有一些转义字符,所以就出错了。 今天,琢磨了一下Navicat for MySQL,发现了其竟然带有 ...

  • Win8下IE10浏览器实现漫游收藏夹不必来回导入导出网址和历史记录

    IE浏览器今天发布了关于 Win8 下 IE浏览器实现漫游收藏夹的教程。这样一来就不必每次都在新电脑上来回导入导出网址和历史记录。只需在Windows8中登陆您的Microsoft账户就能实时同步IE ...

  • 安卓专业绘图工具sbm导入/导出图片方法图文详解

    在使用sbm专业绘图工具时,如何导入或者导出图片呢?其实方法很简单,只需几步就可以实现。下面小编就为大家介绍安卓专业绘图工具sbm导入/导出图片方法,希望能帮到大家! 方法如下: 1)安装并打开sbm ...

  • 360安全浏览器6.0如何导入/导出数据和收藏夹

    点击收藏右侧的下拉按钮,选择导入/导出即可。 收藏夹内容不见了怎么办 这可能是您没有登录之前同步过收藏夹的360帐号,您可以重新登录试试看。 如果您已经登录了360账户,您可以点击账号头像,进入时间机 ...

  • WinRAR如何设置个性化导入导出

    使用WinRAR的过程中,难免要对WinRAR根据个人的爱好进行必要的设置,而如果到别的机器上后再运行WinRAR会发现风格与自己的不符,这时候又得重新进行设置,比较麻烦。选择“选项”→“导入导出设置 ...

  • FireFox导入导出收藏夹和Cookies的方法

    FireFox是一个常用的浏览器,扩展插件众多,和IE相比有很多优点,不过有些细小的地方似乎考虑的不太好,比如用户经常会碰到系统重新安装等问题,这就需要导入导出FireFox浏览器的Cookies和收 ...

  • 谷歌拼音如何导入导出用户自定义短语

    您可以通过状态栏上的“设置”按钮,选择“属性设置” >“词典”>“编辑自定义短语”按钮,打开编辑对话框。点击上面的“导入”和“导出”按钮,进行用户自定义短语的导入导出。

  • IE收藏夹备份如何导入导出

    打开IE浏览器,从菜单栏中找到“文件”---“导入和导出”,打开它(找不到菜单栏?请按键盘上的Alt键); 进入“导入导出设置”向导后,选择“导出到文件”点击下一步; 之后我们看到了很多导入导出选项, ...