首页 > 软件开发 > JavaScript >

如何通过iframe来实现导入导出的效果

来源:互联网 2023-03-16 23:56:14 版权归原作者所有,如有侵权,请联系我们

iframe标签会创建包含另外一个文档的内联框架,跟当前window框架是父子关系,利用iframe,我们可以处理异步无刷新上传、下载文件;通常下载文件利用window.open(downloadUrl)的方式进行,这样打开的弹窗可能会被拦截,而且文件下载完成后,会有空白的界面不会自动关闭等问题;BqU办公区 - 实用经验教程分享!

如何通过iframe来实现导入导出的效果BqU办公区 - 实用经验教程分享!

工具/原料

  • JavaScript
  • form标签(上传)
  • iframe(上传和下载的页面框架载体,避免新开窗口被拦截等体验问题)

方法/步骤

  • 1

    我们先说下载吧,思路是创建一个隐藏的iframe,支持动态指定url实现下载文件流数据。BqU办公区 - 实用经验教程分享!

  • 1本页面未经许可获取自百度经验
  • 2

    【下载】封装一个公共方法,如下图,第一次调用没有创建iframe标签,第二次调用直接执行url,刷新页面。框架会自动跟浏览器通信,如果是文件就会弹出保存文件的窗口,但不会新建空白页面。BqU办公区 - 实用经验教程分享!

    需要注意的是,这个iframe需要是隐藏的,不影响当前主页面的布局。BqU办公区 - 实用经验教程分享!

    iframe.className = "dnone";BqU办公区 - 实用经验教程分享!

    样式表->.dnode{display:none}BqU办公区 - 实用经验教程分享!

    如何通过iframe来实现导入导出的效果BqU办公区 - 实用经验教程分享!

  • 3

    【下载】业务使用方法BqU办公区 - 实用经验教程分享!

    download("http://www.xx.com/a.zip");BqU办公区 - 实用经验教程分享!

    download("/a/b/c/abc.exe");BqU办公区 - 实用经验教程分享!

  • 4

    【下载】上面已经能满足基本的下载功能了。但是,如果页面url不是文件流的请求,而是动态页面呢?比如http://www.abc.com/a.aspx?id=1BqU办公区 - 实用经验教程分享!

    这样的页面,如果服务器能正常处理请求并返回文件流(content-type标识),那就没什么问题。但如果是a.aspx出现了异常情况,客户端点击了下载,什么反应都没有,提示也没得,因为现实的url是在一个隐藏的iframe中,这个iframe对用户来说不可见。BqU办公区 - 实用经验教程分享!

  • 5

    【下载】这个问题怎么破?BqU办公区 - 实用经验教程分享!

    思路是:通过js获取到ifarme的数据,解析子页面返回数据,然后主动提示用户。BqU办公区 - 实用经验教程分享!

    BqU办公区 - 实用经验教程分享!

    this._downloadIframe.onload = function(e){BqU办公区 - 实用经验教程分享!

    // to doBqU办公区 - 实用经验教程分享!

    }BqU办公区 - 实用经验教程分享!

    如何通过iframe来实现导入导出的效果BqU办公区 - 实用经验教程分享!

  • 6

    【上传】上传类似下载的思路(请参考下载),只是多一个form标签的操作。BqU办公区 - 实用经验教程分享!

    如下图,关联form上传表单和iframe之前的关系,通过target属性,这样表单提交的文件数据,是直接传到iframe的。BqU办公区 - 实用经验教程分享!

    如何通过iframe来实现导入导出的效果BqU办公区 - 实用经验教程分享!

  • 7

    【上传】验证上传之后的结果信息,也要监听iframe的onload事件,然后完成解析html的逻辑。BqU办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!BqU办公区 - 实用经验教程分享!


    标签: JAVASCRIPT

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号