监听跨域状态下iframe是否加载成功

最新推荐文章于 2025-04-26 09:50:18 发布

Lidppp

最新推荐文章于 2025-04-26 09:50:18 发布

阅读量1.1k

点赞数 2

文章标签：前端 javascript

本文链接：https://blog.csdn.net/Lidppp/article/details/134552005

版权

本文介绍了一种在跨域状态下检测iframe加载成功的技巧，利用iframe的`load`事件和window.length属性，通过定时检查iframe中嵌套窗口的数量来判断加载是否完成。特别提到，当iframe是动态加载时，需使用interval进行多次轮询。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

监听跨域状态下iframe是否加载成功

注意: 本文方法只适用于iframe加载的页面中有frame或者iframe标签

iframe标签只有onload事件, 并没有onerror事件, 并且不管iframe中的网址是否加载成功, onload都会触发.

当目标网站与自身网站还是跨域状态时,iframeDom.contentWindow所能获取到的属性有限, 并且没有办法注入监听事件, 这个时候可以使用window.length属性

跨域状态下contentWindow可访问的api列表

window.length

返回当前窗口中包含的框架数量 (框架包括frame和iframe两种元素).

具体代码实现

document.querySelectorAll("iframe").forEach(item=>{
  item.addEventListener("load",(e)=>{
    // 防止页面中的iframe是动态加载的 所以使用interval多轮询几次
    let interValKey = setInterval(()=>{
      if(e.target.contentWindow.window.length > 0){
        $(item).addClass("load-end")
        clearInterval(interValKey)
      }
    }, 100)
  })
})