如何知道iframe文件下载download完成 author: @TiffanysBear 问题 当使用iframe作为文件下载的载体时，如何知道文件已经下载完毕。 现有的iframe的onLoad方法具有兼容性问题，在chrome、IE下无法监听onLoad事件监听文件下载完毕，因为onLoad事件本身也是对iframe中的html结构的加载进度监听。 ); } document.body.appendChild(iframe); 当chrome、IE下时，如果HTTP文件头中包含Content-disposition: attachment；即下载文件的链接的话 (‘Expires’, 0); 不然会发现下载功能在opera和firefox里面好好的没问题，在IE下面就是不行 解决思路一：利用cookie 后端将文件下载进度放在cookie中，通过轮询cookie 的方式，对文件下载进度进行获取，判断文件是否已经下载完毕。
HTML5学堂：本文当中，会依次为大家介绍iframe是什么，为何使用iframe；如何在当前网页中调用iframe中的标签和内容；如何在iframe中调用当前网页中的内容；检测iframe内容是否加载完成 ；利用iframe防止钓鱼；如何让iframe中加载的内容决定外层iframe的宽高。 iframe是什么，为何使用iframe？ iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站的内容。 iframe框架'); } </script> 需要注意：IE下的iframe的onload事件我们需要使用绑定的方式，不然不能够生效。 框架'); }); 防止别人使用自己的网站钓鱼 为被调用的iframe文件(自己的网站)，添加如下代码： if (window!
Vite学习指南，基于腾讯云Webify部署项目。
可以将 iframe 理解为一个沙盒，里面的内容能够被 top window 完全控制，而且，主页的 css 样式不会入侵 iframe 里面的样式 默认情况下，iframe 会自带滚动条，不会全屏，如果你想自适应 权限，有3个选项： DENY：当前页面不能被嵌套 iframe 里，即便是在相同域名的页面中嵌套也不允许，也不允许网页中有嵌套 iframe SAMEORIGIN：iframe 页面的地址只能为同源域名下的页面 window 的 onload 事件需要在所有 iframe 加载完毕后（包含里面的元素）才会触发。 这意味着 iframe 在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。如果 iframe 中的内容比主页面的内容更重要，这当然是很好的。 但通常情况下，iframe 里的内容是没有主页面的内容重要的。这时 iframe 中用光了可用的连接就是不值得的了。
另一块是前端实现文件下载功能，虽然方法很多，为了不用重复造轮子，在此还是总结一波，毕竟多页面下的应用场景还是很多的。 文章摘要 实现页面之间通信的方法 实现父子页面和子页面与子页面之间通信的方法 前端实现文件下载功能 由于本文介绍的主要还是基于javascript，不涉及任何框架方面的问题（如果想研究vue，react 效果如下： 2.实现父子页面和子页面与子页面之间通信的方法 父子页面这里主要针对iframe而言，即iframe和父页面以及iframe页面之间的通信。 4.前端实现文件下载功能 对于下载文件来说，大部分场景都是后端来实现，前端只需要请求接口就好了，但是有时候这种方式反而会占用多余的资源和带宽，如果需要下载的是用户自己生成的内容或者内容已经返回到客户端了 ，这时候能不经过服务端而直接生成下载任务，能节省不少的资源和时间开销。
每点击一次加载一个新的iframe，比较懒，所以两个新页面也做成了iframe，在做的过程中出现了如下问题，这里总结一下： 1.嵌入的iframe页面无法滚动 2.meta元素的ontent不一致， 标签的锚点失效 5.当我点击a加载了a的iframe页面，在切换到b，这个时候b页面字体莫名的变大 6.导航栏有个样式要求，active的时候icon是为红色的icon，其他状态下则为灰色的。 5.iframe页面切换的时候，切换后的页面样式莫名变大 之前我做页面切换，是用过不重新加载iframe,而是直接修改了iframe的url，但是好像在这种情况下，可能之前上一个页面加载的css没有完全清除掉 所以最后每次切换的时候，豆浆iframe给remove掉，在append加载新的iframe。 6.页面点击跳转之后，返回的状态标记 使用了localStorage记录了url，navIndex 7.某个安卓机后返回无法重新加载iframe 返回后再append的iframe的代码下再让其重新渲染下
使用iframe加载其他页面的时候，需要自适应iframe的高度 这里加载了两个不同内容高度的页面至iframe中 1. .html" frameborder="0" width="100%"></iframe>
隔离完美，无论是 js、css、dom 都完全隔离开来 多应用激活，页面上可以摆放多个iframe来组合业务 但是开发者又厌恶使用iframe，因为缺点也非常明显： 路由状态丢失，刷新一下，iframe 来看无界如何一步一步的解决iframe的问题，假设我们有 A 应用，想要加载 B 应用： 在应用 A 中构造一个shadow和iframe，然后将应用 B 的html写入shadow中，js运行在iframe pathname和hash 但是一旦设置src后，iframe由于同域，会加载主应用的html、js，所以必须在iframe实例化完成并且还没有加载完html时中断加载，防止污染子应用 此时可以采用轮询监听 __WUJIE.provide );`; iframe 和 shadowRoot 副作用的处理 iframe 内部的副作用处理在初始化iframe时进行，主要分为如下几部 /** * 1、location ，没有额外的切换成本 性能和体积兼具 子应用执行性能和原生一致，子应用实例instance运行在iframe的window上下文中，避免with(proxyWindow){code}这样指定代码执行上下文导致的性能下降
图片来源于网络 iFrame注入是一种非常常见的跨站脚本攻击。它包括已插入到网页或文章内容的一个或多个iframe代码，或一般下载一个可执行程序或进行其他动作使网站访客的电脑妥协。 在最好的情况下，谷歌可能会标注该网站“恶意”。最糟糕的情况是，站点所有者和访问者最终使用了受恶意软件感染的计算机。 多种利用方式如下： <iframe src="vbscript:msgbox(1)"></iframe> (IE) <iframe src="javascript:alert(1)"></iframe query=<script>eval(location.hash.slice(1))</script>#alert(1) 接受用户提供的数据作为iframe源URL可能会导致在Visualforce页面中加载恶意内容 发生iFrame欺骗漏洞在以下情况： 1、数据通过不可信的源进入web应用程序。 2、数据作为iframe URL使用，而不进行验证。
本文简要分析一下这个漏洞的原理。 '); </script> poc 中第一个 iframe 利用一个302跳转，跳转到目标域，第二个 iframe 也加载了目标域的一个资源，和两个资源可以是不同的资源，当然跟Content-Type也没有关系 上述 poc 在浏览器中的渲染过程大概如下： 1、浏览器渲染第一个 iframe，并加载 redirect.php 的资源； 2、浏览器渲染第二个 iframe，并加载对应的资源； 3、浏览器在第一个 iframe 上执行 eval 中的 js 脚本，分为一下几个步骤： a.将第一个 iframe 赋值给一个变量 b.弹出一个alert 框 c.用户关闭 alert框 利用成本&&其他 根据现有的 payload，貌似整个利用过程需要用户参与，事实上并非如此，看如下 payload： <iframe src="redirect.php"></iframe> <iframe
接下来我们就讲解具体实现方案。 实现原理 1. 给菜单URL添加嵌套网页前缀，如果是服务端网页，除内部URL外，以iframe:前缀开头，外部网页直接以http[s]完整路径开头。 2. 路由导航守卫在动态加载路由时，检测到如果是外部嵌套网页，则绑定IFrame嵌套组件，最后用IFrame来渲染嵌套页面。 3. 绑定嵌套组件 在导航守卫动态加载路由的时候，解析URL，如果是嵌套页面，则绑定到IFrame组件。 router/index.js ? 源码下载 后端：https://gitee.com/liuge1988/kitty 前端：https://gitee.com/liuge1988/kitty-ui.git ---- 作者：朝雨忆轻尘 出处 ：https://www.cnblogs.com/xifengxiaoma/ 版权所有，欢迎转载，转载请注明原文作者及出处。
昨天在制作展示导航 WordPress 插件时，把这个问题也一并处理了，其中涉及到了这个 iFrame 动态载入效果，现在记录一下，顺便分享。 先展示下效果： 加载中： ? 完成后： ? 以下是完整代码： <div style="float: left;width: 205px;font-size: 13px ! ： ①、在 <em>iframe</em> 代码之前先插入一个 div 用于 <em>iframe</em> <em>载</em>入前的显示，除了 id 需要一一对应，其他自行发挥即可。 ②、将 <em>iframe</em> 的高度设为 0，并在原有 <em>iframe</em> 的基础上插入加<em>载</em>前和加<em>载</em>后的函数调用 onreadystatechange=stateChangeIE(this) onload=stateChangeFirefox (this) ③、如代码的 8~28 行新增 2 个 js 函数即可，注意上<em>下</em>元素 ID 需要一 一对应； ④、其中 22 和 23 行禁止 <em>iframe</em> 未加<em>载</em>完成的空白占位，只有加<em>载</em>完成之后，才会将
一个短小的演示：包含 SVG 下面是一个内联（嵌入式）SVG 图形。它是从外部文件 signal.svg中加载的。 要加载并嵌入 SVG 文件，我用了下面的标记： <iframe src="signal.svg" onload="this.before((this.contentDocument.body || this.contentDocument 这是因为代码用 iframe 加载文件，并且在删除 iframe之前，用 onload 事件在 HTML 中 iframe 的位置之前注入了 iframe 里的内容。 可以用下面的标记加载： <iframe src="/images/includespost/htmlexample.html" onload="this.before((this.contentDocument.body 它没有留下任何痕迹：iframe 将内容导入页面后会被删除。注意：你可能希望为 iframe 指定 border:0; 甚至可以在加载时安全地隐藏它（或许通过 onerror 事件再次显示它？）。
解决img标签src为空或加载失败后的边框问题 img标签的src为空或者加载失败，浏览器都会自动加上一个边框，一定程度上影响美观。 针对路径为空 以下是一种高效的方法： img[src=""],img:not([src]){opacity:0;} /*这样可以实现在路径为空时隐藏*/ 针对图片加载失败 首先找到加载失败的原因 <input type = "file"> 通过form的action属性提交表单，并接收处理返回值的方法如下： //html: <iframe src="" frameborder="0" name ("pre")[0].innerHTML; alert(responseText); // do something... }) </script> 剖析一下： 首先，写一个iframe， 结构如下： <iframe> {"code": "01"} </iframe> 其次，通过js监听iframe的load事件。如果iframe加载完成，就会触发load事件。
{"code": "01"}
使用场景 加载其他域的网页 <iframe>是允许跨域请求资源的，但是不能够修改，由此可以在网页中嵌套其他网页，如需要跨域通信的话，需要考虑document.domain、window.name、window.postMessage 加载广告 广告是与原文无关的，假如硬编码进去，会造成网页布局的紊乱,而且这样势必需要引入额外的css和js文件，极大的降低了网页的安全性，使用iframe便可以解决这些问题。 实现广告展示的一个解决方案 若需要刷新iframe则只需要刷新框架内，不需要刷新整个页面 缺点 iframes阻塞页面加载，影响网页加载速度，iframe加载完毕后才会触发window.onload事件 加载了新页面，增加了css与js文件的请求，即额外增加了HTTP请求，增加了服务器负担。 有时iframe由于页面挤占空间的原因出现滚动条，造成布局混乱。 iframe与主页面是共享链接池的，若iframe加载时用光了链接池，则会造成主页面加载阻塞。
在项目中使用iframe 来加载外部资源，需要在iframe请求外部资源的时候，需要显示一个loading，在加载完成后，将这个loading隐藏掉，刚开始看到W3C中 iframe有一个 onload 事件----该事件在iframe加载资源完成后就会触发，但是这个事件我试了试，发现触发不了，最在https://stackoverflow.com/questions/20572734/load-event-not-firing-when-iframe-is-loaded-in-chrome 找到了有效的方法 解决办法如下： 1 <iframe class="html_area" src="http://www.baidu.com"></iframe> 设一个变量，var show_loading self.show_iframe_loading = false clearInterval(interval) } },500) 这样在刚开始请求的时候就显示loading，然后启动了计时器，每500ms检测一次，如果iframe
考虑一点： IE/Edge (和其他浏览器) 拒绝从安全的域(HTTPS)加载不安全的内容 (HTTP) . 现代浏览器默认情况下不会渲染混合内容（来自安全站点的不安全数据）。 此外，如果不安全的内容来自 iframe，则会显示混乱的错误信息。 ? 允许加载图片 一个有趣的例外是，所有浏览器允许无限制加载并渲染不安全的图像。 一年前 Eric Lawrence (aka: Internet Hero) 写了一篇博文很清晰地解释了为什么 IE 的团队允许不提示警告的情况下加载不安全的图像。 如果你想试验一下，可以在此试一下。 之前我们知道了在没有用户交互的情况下渲染内容的规则（image 标签）存在着例外情况，我尝试加载源是图像的 IFRAME （而不是 IMG），但并没有成功。
扫码关注云+社区
领取腾讯云代金券
云服务器
测试服务 WeTest
云数据库 PostgreSQL
文件存储
SSL 证书