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

onload与ifEventListener('load')的iframe行为

在浏览器中,onloadaddEventListener('load') 都是用于监听页面加载完成事件的方法。但是,在处理 iframe 时,它们的行为可能会有所不同。

首先,onload 是一个属性,它可以在 HTML 标签中直接指定一个 JavaScript 函数,当页面加载完成时,该函数会被自动调用。例如:

代码语言:html<iframe src="example.html" onload="myFunction()"></iframe>
复制

addEventListener('load') 是一个 JavaScript 方法,它可以在页面加载完成时添加一个事件监听器。例如:

代码语言:javascript
复制
var iframe = document.getElementById('myIframe');
iframe.addEventListener('load', myFunction);

在处理 iframe 时,onloadaddEventListener('load') 的行为可能会有所不同。具体来说,onload 事件会在 iframe 内部的所有资源(包括图片、脚本等)都加载完成后触发,而 addEventListener('load') 事件则会在 iframe 的内容文档加载完成后触发。

因此,如果您需要在 iframe 内容文档加载完成后执行某些操作,可以使用 addEventListener('load') 方法。如果您需要在 iframe 内部的所有资源都加载完成后执行某些操作,可以使用 onload 属性。

需要注意的是,由于浏览器之间的差异,onloadaddEventListener('load') 的具体行为可能会有所不同。因此,在编写代码时,建议使用 addEventListener('load') 方法,以确保代码的兼容性和可靠性。

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

相关·内容

  • windows.onload()$(document).ready()区别

    浏览器加载完DOM后,会通过javascript为DOM元素添加事件, 在javascript中,通常使用window.onload()方法。...下面介绍一下两者区别。 window.onload() $(document).ready() 执行时机 在页面所有元素(包括图片,引用文件)加载完后执行。...如果想要网页所有内容(包括图片等)加载完毕,再注册事件,使用$(window).load(function); 等价于window.onload() 编写个数 不能同时写多个,后面的将会覆盖前面的。...ex: window.onload=function(){ alert("A"); } window.onload=function(){ alert("B"); } 结果会执行“B” 如果想要顺序执行...alert("A")和alert("B")需写成 window.onload=function(){ alert("A"); alert("B"); } 可以同时写多个 简写 无 $(document)

    96510

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

    这实际上是 DOMContentLoaded 事件之前延迟。 window.onload 当整个页面,包括样式、图片和其他资源被加载完成时,会触发 window 对象上 load 事件。...; }; 它行为已经改变了,因为有些站长通过显示误导性和恶意信息滥用了此事件处理程序。所以,目前一些旧浏览器可能仍将其显示为消息,但除此之外 —— 无法自定义显示给用户消息。...= () => log('window onload'); </iframe...这里我们可以发现,它与 img.onload(img 是最后一个资源)和 window.onload 几乎同时发生。转换到 complete 状态意义 window.onload 相同。...区别在于 window.onload 始终在所有其他 load 处理程序之后运行。

    1.8K10

    姿态估计行为识别(行为检测、行为分类)区别

    大家好,又见面了,我是你们朋友全栈君。 姿态估计和行为识别作为计算机视觉两个领域,对于新人来说,较为容易弄混姿态估计和行为识别两个概念。...其中MPII是当前单人姿态估计中最常见benchmark,使用是PCKh指标(可以认为预测关键点GT标注关键点经过head size normalize后距离),目前有的算法已经可以在上面达到...(Action Detection/Regnition),最终结果是得到图像或视频段中目标的行为类别。...常用行为检测数据集: THUMOS2014:在行为检测任务中只有20类动作未分割视频是有序行为片段标注 MEXaction2:骑马和斗牛 ActivityNet:目前最大数据集,同时包含分类和检测两个任务...,包含200个动作类别 行为识别的难点: (1)类内和类间差异, 同样一个动作,不同人表现可能有极大差异。

    2.6K20

    关于ajax无刷新上传和下载

    start"); }; // ajax过程成功完成事件 xhr.onload = function (event) { console.log("load success"); console.log...所以这要说是第三种结合 form 和 iframe 来实现,原理: 隐藏 form 和 iframe , form target 指向 iframe ,监听 iframe load ,来获取上传结果...优点:兼容该死 ie 低版本浏览器 缺点:跨域上传不支持,还需自定义反向代理,因为 iframe onload 不支持跨域 上传接口 API: 成功返回: { code: 1, msg: '上传成功...fm.contentDocument; if (doc.document) doc = doc.document; var content = doc.body.textContent; //此处值取决...fm.attachEvent("onload", load) : (fm.onload = load); 关于下载: 暴力一点下载直接 window.open("/rest/donwload

    2.5K20

    $(window).load()$(document).ready()区别

    前者区别是dom树虽然已经建立起来了,但页面不一定加载完毕,如一些大图片等,加载完成就需要一定时间;但是页面加载完毕后,dom肯定也就建立起来了;但是有些文字或者图片链接等需要在文档加载完毕前,...2.可以被执行次数不同:$(document).ready()可以在JavaScript代码中出现多次,并且里面的函数或者代码都可以得到执行;而$(window).load()只能在JavaScript...代码中出现一次,如果有多个$(window).load(),那么只有最后一个$(window).load()里面的函数或者代码才会执行,之前$(window).load()都将被覆盖; Js代码...}); 3.执行效率不同:如要在dom元素节点中添加onclick属性节点,这时用$(document).ready()就要比用$(window).load()效率高...;但是在某些时候还必须得用$(window).load()才行,如之前写app下载,如果要关闭这个下载框,则必须要在整个下载框加载完毕后,才能点击关闭图标,对app下载框执行隐藏。

    1.1K100

    不使用定时器实现iframe自适应高度

    在微博上看到有人提及不使用定时器实现iframe自适应(onReadyStateChange + onLoad + onResize + onDOMSubtreeModified),然后就去折腾了,这篇之前文章...自适应高度问题,比较理想办法是: iframeonload前使用定时器修改iframe高度,在onload后清除定时器,然后监听iframedocumentDOMSubtreeModified...为什么在onload之前还要使用定时器呢?防止iframe页面加载资源过久,页面的高度显示上会有问题。...而监听DOMSubtreeModified事件主要作用是为了省去在iframe内修改dom时,每一次都要主动调用一次修改iframe高度方法。...注明:文章标题是不使用定时器,而上面我提到定时器,主要是担心iframedomreadyonload那段时间内,iframe高度看上去会很怪异(实际开发中这一段时间有多长,影响有多大,到底要不要加定时器

    2.2K20

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

    资源加载:onload,onerror 浏览器允许我们跟踪外部资源加载 —— 脚本,iframe,图片等。...对于我们自己脚本,可以使用 JavaScript module,但是它们并未被广泛应用于第三方库。 script.onload 我们得力助手是 load 事件。它会在脚本加载并执行完成时触发。...对于 来说,iframe 加载完成时会触发 iframe.onload 事件,无论是成功加载还是出现 error。 这是出于历史原因。...我们有了完整 error 报告。 总结 图片 ,外部样式,脚本和其他资源都提供了 load 和 error 事件以跟踪它们加载: load 在成功加载时被触发。...唯一例外是 :出于历史原因,不管加载成功还是失败,即使页面没有被找到,它都会触发 load 事件。

    4.2K10

    在 HTML 中包含资源新思路

    本周我在思考如何用一些新 fetch 相关标记模式来实现这一点,例如 rel="preload" 或 HTML import,但我总是得出相同结论,即这些都不能使你方便地访问所取得文件内容。...这是因为代码用 iframe 加载文件,并且在删除 iframe之前,用 onload 事件在 HTML 中 iframe 位置之前注入了 iframe内容。...服务器端嵌入不同,此模式允许我们包含外部文件,同时允许自然缓存文件以供日后重用。(使用服务器端包含内容,在客户端缓存是可能,但难以做到)。...IE 会显示 iframe备选内容,但我认为可以通过调整 onload 处理中 JS 来获得对 IE 支持,因为它目前用是 IE 不喜欢语法。稍微调整一下,我认为 IE 支持是可能。...使用 iframe 进行此模式另一个好处是, iframe 会在进入视口时获得延迟加载能力。这可以用 load ="lazy" 属性来实现,该属性也适用于 img 元素。

    3.1K30

    vue项目iframe传值问题

    前言 项目需要,我需要引入一个已经封装好浏览器插件。插件只能以html方式调用,   所以。我把插件使用封装了一个html页面。vue项目则利用iframe方式引入。   ...到这里我就遇到了一个问题,那就是vue项目中iframe传值问题,这里做个笔记防止之后忘记,   如果有其他方式,欢迎大家交流,不胜感激。.../test.html" frameborder="0" scrolling="auto" @load="loaded" /> export default...这种方式是加载一次,数据不能实时同步,或者我没有实时同步数据方法  第二种:直接操作iframe 1、父级页面直接给iframewindow对象设置值 setData(data) { const.../test.html" frameborder="0" scrolling="auto" @load="loaded" /> // 工具类 export

    1.8K10
    领券