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

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