展开

关键词

如何知道iframe文件download完成

如何知道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 的方式,对文件进度进行获取,判断文件是否已经完毕。

5.2K40

iframe基本知识及iframe版本Tab切换

HTML5学堂:本文当中,会依次为大家介绍iframe是什么,为何使用iframe;如何在当前网页中调用iframe中的标签和内容;如何在iframe中调用当前网页中的内容;检测iframe内容是否加完成 ;利用iframe防止钓鱼;如何让iframe中加的内容决定外层iframe的宽高。 iframe是什么,为何使用iframeiframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加别人网站的内容。 iframe框架'); } </script> 需要注意:IEiframe的onload事件我们需要使用绑定的方式,不然不能够生效。 框架'); }); 防止别人使用自己的网站钓鱼 为被调用的iframe文件(自己的网站),添加如代码: if (window!

1.5K40
  • 广告
    关闭

    90+款云产品免费体验

    提供包括云服务器,云数据库在内的90+款云计算产品。打造一站式的云产品试用服务,助力开发者和企业零门槛上云。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    深入理解iframe

    可以将 iframe 理解为一个沙盒,里面的内容能够被 top window 完全控制,而且,主页的 css 样式不会入侵 iframe 里面的样式 默认情况iframe 会自带滚动条,不会全屏,如果你想自适应 权限,有3个选项: DENY:当前页面不能被嵌套 iframe 里,即便是在相同域名的页面中嵌套也不允许,也不允许网页中有嵌套 iframe SAMEORIGIN:iframe 页面的地址只能为同源域名的页面 window 的 onload 事件需要在所有 iframe完毕后(包含里面的元素)才会触发。 这意味着 iframe 在加资源时可能用光了所有的可用连接,从而阻塞了主页面资源的加。如果 iframe 中的内容比主页面的内容更重要,这当然是很好的。 但通常情况iframe 里的内容是没有主页面的内容重要的。这时 iframe 中用光了可用的连接就是不值得的了。

    2K10

    iframe 有什么好处,有什么坏处?

    可以将 iframe 理解为一个沙盒,里面的内容能够被 top window 完全控制,而且,主页的 css 样式不会入侵 iframe 里面的样式 默认情况iframe 会自带滚动条,不会全屏,如果你想自适应 权限,有3个选项: DENY:当前页面不能被嵌套 iframe 里,即便是在相同域名的页面中嵌套也不允许,也不允许网页中有嵌套 iframe SAMEORIGIN:iframe 页面的地址只能为同源域名的页面 window 的 onload 事件需要在所有 iframe完毕后(包含里面的元素)才会触发。 这意味着 iframe 在加资源时可能用光了所有的可用连接,从而阻塞了主页面资源的加。如果 iframe 中的内容比主页面的内容更重要,这当然是很好的。 但通常情况iframe 里的内容是没有主页面的内容重要的。这时 iframe 中用光了可用的连接就是不值得的了。

    38410

    前端复盘: iframe跨页通信和前端实现文件

    另一块是前端实现文件功能,虽然方法很多,为了不用重复造轮子,在此还是总结一波,毕竟多页面的应用场景还是很多的。 文章摘要 实现页面之间通信的方法 实现父子页面和子页面与子页面之间通信的方法 前端实现文件功能 由于本文介绍的主要还是基于javascript,不涉及任何框架方面的问题(如果想研究vue,react 效果如: 2.实现父子页面和子页面与子页面之间通信的方法 父子页面这里主要针对iframe而言,即iframe和父页面以及iframe页面之间的通信。 4.前端实现文件功能 对于文件来说,大部分场景都是后端来实现,前端只需要请求接口就好了,但是有时候这种方式反而会占用多余的资源和带宽,如果需要的是用户自己生成的内容或者内容已经返回到客户端了 ,这时候能不经过服务端而直接生成任务,能节省不少的资源和时间开销。

    21230

    基于iframe的移动端嵌套

    每点击一次加一个新的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的代码再让其重新渲染

    1.7K60

    让动态的 iframe 内容高度自适应

    使用iframe其他页面的时候,需要自适应iframe的高度 这里加了两个不同内容高度的页面至iframe中 1. .html" frameborder="0" width="100%"></iframe>

    注意到这里的 this.contentWindow 其实就类似与方的 name 可以发现,高度虽然能自适应,不过只支持高度了“从小到大”的自适应 如iframe2的内容比iframe1的高,后者动态加出前者能自适应,但前者动态加出后者就不行了,这种高度减小不了 最后的解决办法是 j = iframes.length; i < j; ++i) { // 放在闭包中,防止iframe触发load事件的时候标不匹配 (function '); for (var i = 0, j = iframes.length; i < j; ++i) { // 放在闭包中,防止iframe触发load事件的时候标不匹配

    2K30

    基于 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}这样指定代码执行上文导致的性能

    1.6K90

    BUG赏金 | 当我发现iFrame注入时的利用

    图片来源于网络 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使用,而不进行验证。

    35110

    漏洞追踪:最新IE UXSS漏洞技术分析

    本文简要分析一这个漏洞的原理。 '); </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

    34970

    Vue + Element UI 实现权限管理系统 前端篇(十五):嵌套外部网页

    来我们就讲解具体实现方案。 实现原理 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/  版权所有,欢迎转,转请注明原文作者及出处。

    1K30

    iFrame添加动态入效果,提高用户体验

    昨天在制作展示导航 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>完成之后,才会将

    48540

    在 HTML 中包含资源的新思路

    一个短小的演示:包含 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 事件再次显示它?)。

    22030

    前端技巧

    解决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事件。

    6310

    iframe框架及优缺点

    使用场景 加其他域的网页 <iframe>是允许跨域请求资源的,但是不能够修改,由此可以在网页中嵌套其他网页,如需要跨域通信的话,需要考虑document.domain、window.name、window.postMessage 加广告 广告是与原文无关的,假如硬编码进去,会造成网页布局的紊乱,而且这样势必需要引入额外的css和js文件,极大的降低了网页的安全性,使用iframe便可以解决这些问题。 实现广告展示的一个解决方案 若需要刷新iframe则只需要刷新框架内,不需要刷新整个页面 缺点 iframes阻塞页面加,影响网页加速度,iframe完毕后才会触发window.onload事件 加了新页面,增加了css与js文件的请求,即额外增加了HTTP请求,增加了服务器负担。 有时iframe由于页面挤占空间的原因出现滚动条,造成布局混乱。 iframe与主页面是共享链接池的,若iframe时用光了链接池,则会造成主页面加阻塞。

    1.1K20

    iframe外部资源,显示隐藏loading,onload失效

    在项目中使用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

    23920

    绕过混合内容警告 - 在安全的页面加不安全的内容

    考虑一点: IE/Edge (和其他浏览器) 拒绝从安全的域(HTTPS)加不安全的内容 (HTTP) . 现代浏览器默认情况不会渲染混合内容(来自安全站点的不安全数据)。 此外,如果不安全的内容来自 iframe,则会显示混乱的错误信息。 ? 允许加图片 一个有趣的例外是,所有浏览器允许无限制加并渲染不安全的图像。 一年前 Eric Lawrence (aka: Internet Hero) 写了一篇博文很清晰地解释了为什么 IE 的团队允许不提示警告的情况不安全的图像。 如果你想试验一,可以在此试一。 之前我们知道了在没有用户交互的情况渲染内容的规则(image 标签)存在着例外情况,我尝试加源是图像的 IFRAME (而不是 IMG),但并没有成功。

    1K70

    扫码关注云+社区

    领取腾讯云代金券