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

最新推荐文章于 2026-03-29 03:31:55 发布

原创最新推荐文章于 2026-03-29 03:31:55 发布 · 1.5k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #javascript

收录于

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

监听跨域状态下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)
  })
})