首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

动态创建的iframe触发onload事件两次

基础概念

iframe 是 HTML 中的一个元素,用于在当前页面中嵌入另一个 HTML 文档。onload 事件是 iframe 的一个事件,当 iframe 中的内容完全加载完成后触发。

相关优势

  • 内容隔离iframe 可以隔离内嵌页面和主页面的 JavaScript 和 CSS,避免冲突。
  • 并行加载iframe 可以并行加载多个资源,提高页面加载速度。
  • 代码复用:可以将一些公共组件或页面通过 iframe 嵌入,实现代码复用。

类型

  • 静态 iframe:在 HTML 中直接定义的 iframe
  • 动态 iframe:通过 JavaScript 动态创建的 iframe

应用场景

  • 嵌入第三方内容:如地图、视频等。
  • 模块化页面设计:将页面拆分为多个独立的模块,通过 iframe 嵌入。
  • 跨域通信:通过 postMessage 实现跨域通信。

问题分析

动态创建的 iframe 触发 onload 事件两次的原因可能有以下几种:

  1. 重复创建和插入:在某些情况下,可能会重复创建和插入 iframe,导致 onload 事件被触发多次。
  2. 事件绑定问题:可能在同一个 iframe 上绑定了多个 onload 事件处理函数。
  3. 浏览器缓存:某些浏览器可能会缓存 iframe 的内容,导致 onload 事件被重复触发。

解决方法

1. 避免重复创建和插入

确保在创建和插入 iframe 之前,先移除已经存在的 iframe

代码语言:txt
复制
let iframe = document.getElementById('myIframe');
if (iframe) {
    document.body.removeChild(iframe);
}
iframe = document.createElement('iframe');
iframe.id = 'myIframe';
document.body.appendChild(iframe);
iframe.onload = function() {
    console.log('Iframe loaded');
};

2. 确保事件只绑定一次

在绑定 onload 事件之前,先移除已经绑定的事件。

代码语言:txt
复制
let iframe = document.createElement('iframe');
iframe.onload = function() {
    console.log('Iframe loaded');
};
document.body.appendChild(iframe);

3. 禁用浏览器缓存

可以通过设置 iframesrc 属性为一个唯一的 URL 来禁用缓存。

代码语言:txt
复制
let iframe = document.createElement('iframe');
iframe.src = 'https://example.com/page.html?' + new Date().getTime();
iframe.onload = function() {
    console.log('Iframe loaded');
};
document.body.appendChild(iframe);

参考链接

通过以上方法,可以有效解决动态创建的 iframe 触发 onload 事件两次的问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 实现ApplicationListener 事件被触发两次的问题

    Override public void onApplicationEvent(ContextRefreshedEvent contextRefreshedEvent) { } } 但是发现这个事件被触发了两次...里面代码被重复执行了 1.排查问题 原因是: 一个项目中引入Spring和SpringMVC这两个框架,那么它其实就是两个容器,Spring是父容器,SpringMVC是其子容器,并且在Spring父容器中注册的Bean...对于SpringMVC容器中是可见的,而在SpringMVC容器中注册的Bean对于Spring父容器中是不可见的,也就是子容器可以看见父容器中的注册的Bean,反之就不行。...详见 那么其实我们spring 的applicationontext和使用MVC之后的webApplicationontext在刷新bean后都会调用我们的onApplicationEvent方法,分别传入各自的...//需要执行的逻辑代码,当spring容器初始化完成后就会执行该方法。 }

    1.1K40

    DataGrid中DropDownList的动态绑定和触发DropDownList事件

    大家好,又见面了,我是你们的朋友全栈君。...我在写DataGrid控件中子控件事件时候,DropDownList的事件相比而言麻烦一点,在此,我简单罗列如下(我在此处为了方便这里都用DataGrid中的隐藏列存储我所要的数据): 一、DropDownList...的动态绑定,只需在DataGrid1_ItemDataBound的事件中,取出数值进行匹配,便可以了,具体代码如下: 二、触发DataGrid中DropDownList的事件 前台: // 取出DropDownList选中项文本int ITid = Convert.ToInt32(item.Cells[0].Text);// 取出该行的第一格的数据...如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    1.4K20

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

    在onload事件触发时,根据body的高度自适应iframe的高度 iframe-wrapper"> iframe name="iframe1...可以发现,高度虽然能自适应,不过只支持高度了“从小到大”的自适应 如iframe2的内容比iframe1的高,后者动态加载出前者能自适应,但前者动态加载出后者就不行了,这种高度减小不了 最后的解决办法是...在onload事件中动态设置高度为body高度之前,先将原高度还原为auto或空值 可以用setTimeout(fn,0)将高度设置放到下一轮事件循环中执行,或者在 onbeforeunload 事件中先把高度设置为...j = iframes.length; i < j; ++i) { // 放在闭包中,防止iframe触发load事件的时候下标不匹配 (function...'); for (var i = 0, j = iframes.length; i < j; ++i) { // 放在闭包中,防止iframe触发load事件的时候下标不匹配

    7.2K51

    深入理解iframe

    DOM 元素慢了 1-2 个数量级 iframe 的创建比其它包括 scripts 和 css 的 DOM 元素的创建慢了 1-2 个数量级,使用 iframe 的页面一般不会包含太多 iframe,...但带来一些其它的问题:onload 事件以及连接池(connection pool) 2、阻塞页面加载 及时触发 window 的 onload 事件是非常重要的。...onload 事件触发使浏览器的 “忙” 指示器停止,告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后,它给用户的感觉就是这个网页非常慢。...window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。...一种解决办法是,在主页面上重要的元素加载完毕后,再动态设置 iframe 的 SRC。 4、不利于 SEO 搜索引擎的检索程序无法解读 iframe。

    4.9K10

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

    DOM 元素慢了 1-2 个数量级 iframe 的创建比其它包括 scripts 和 css 的 DOM 元素的创建慢了 1-2 个数量级,使用 iframe 的页面一般不会包含太多 iframe,...但带来一些其它的问题:onload 事件以及连接池(connection pool) 2、阻塞页面加载 及时触发 window 的 onload 事件是非常重要的。...onload 事件触发使浏览器的 “忙” 指示器停止,告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后,它给用户的感觉就是这个网页非常慢。...window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。...一种解决办法是,在主页面上重要的元素加载完毕后,再动态设置 iframe 的 SRC。 4、不利于 SEO 搜索引擎的检索程序无法解读 iframe。

    4.5K10

    jquery中动态新增的元素节点无法触发事件解决办法

    在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法.   ...),想必后面通过ajax加载进来的列表中的回复按钮,点击事件会失效。   ...其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件。...解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法,如下: 方法一:使用live   live()函数会给被选的元素绑定上一个或者多个事件处理程序,并且规定当这些事件发生时运行的函数。...通过live()函数适用于匹配选择器的当前及未来的元素。比如,通过脚本动态创建的元素。

    2.1K20

    【IOC 控制反转】Android 事件依赖注入 ( 事件依赖注入具体的操作细节 | 创建 事件监听器 对应的 动态代理 | 动态代理的数据准备 | 创建调用处理程序 | 创建动态代理实例对象 )

    文章目 前言 一、创建 事件监听器 对应的 动态代理 二、动态代理 数据准备 三、动态代理 调用处理程序 四、动态代理 实例对象创建 前言 Android 依赖注入的核心就是通过反射获取 类 / 方法...| 监听器回调方法 ) ; 事件依赖注入比较复杂 , 涉及到动态代理 , 本博客分析 【IOC 控制反转】Android 事件依赖注入 ( 事件依赖注入代码示例 ) 事件依赖注入的详细步骤 ; 本博客的核心是...: 使用动态代理 , 创建 View.OnClickListener 或 View.OnLongClickListener 或 View.onTouchListener 等接口的动态代理类 ; 拦截相应的...onClick , onLongClick , onTouch 方法 , 执行自己的方法 , 其它方法正常执行 ; 一、创建 事件监听器 对应的 动态代理 ---- 为组件设置的监听器可能是 View.OnClickListener...; 动态代理是作用于接口上的 , 根据接口动态创建该接口子类的代理对象 ; 原来是设置了一个匿名内部类 , 这个匿名内部类就是代理模式中的 被代理对象 ; textView.setOnClickListener

    2.5K10

    JavaScript 页面资源加载方法onload,onerror总结

    资源加载:onload,onerror 浏览器允许我们跟踪外部资源的加载 —— 脚本,iframe,图片等。...对于我们自己的脚本,可以使用 JavaScript module,但是它们并未被广泛应用于第三方库。 script.onload 我们的得力助手是 load 事件。它会在脚本加载并执行完成时触发。...对于 iframe> 来说,iframe 加载完成时会触发 iframe.onload 事件,无论是成功加载还是出现 error。 这是出于历史原因。...error 在加载失败时被触发。 唯一的例外是 iframe>:出于历史原因,不管加载成功还是失败,即使页面没有被找到,它都会触发 load 事件。...答案: 为每个资源创建 img。 为每个图片添加 onload/onerror。 在 onload 或 onerror 被触发时,增加计数器。

    4.8K10

    上下div高度动态自适应--另类处理方案

    客户要求做到默认满屏(但要动态适应不同的窗体大小,也就是浏览器窗体用户会手动改变其大小),但上部分条件输入区域有动态变化高度的现象。     ...在遇到上述问题,您是否第一反应就是利用window的onresize事件,做尺寸的动态调整。但是条件输入区域某个按钮动态改变了上部分的高度时,我们又应该如何呢。是否有统一的处理方案呢。...$object); }      在此处,为了做到兼容IE11(因为Ie11不支持attacheEvent方法,所以也会被判断为现代浏览器),本人创建的DOM,不是使用的object而是使用的...iframe,因为在IE下object的onload事件不能触发,而iframe的可能有;并且iframe的边框一定要去掉,否则影响判断。...$header.detachEvent('onresize'); }      IE浏览器的实现相对简单,因为IE环境下的div天身支持onresize事件。

    3.2K50

    用框架的你,可能早已忽略了这些事件API

    乍一看,DOMContentLoaded 事件非常简单。DOM 树准备就绪 —— 这是它的触发条件。它并没有什么特别之处。...使用 document.createElement('script') 动态生成并添加到网页的脚本也不会阻塞 DOMContentLoaded。...这实际上是 DOMContentLoaded 事件之前的延迟。 window.onload 当整个页面,包括样式、图片和其他资源被加载完成时,会触发 window 对象上的 load 事件。...= () => log('window onload'); iframe src="iframe.html" onload="log('iframe onload')">iframe...当用户想要离开页面时,window 上的 beforeunload 事件就会被触发。如果我们取消这个事件,浏览器就会询问我们是否真的要离开(例如,我们有未保存的更改)。

    1.9K10
    领券