主页面与内嵌iframe的jQuery load/ready事件执行顺序及实现咨询

事件触发认知验证 #

你的认知完全正确：

• jQuery的$(document).ready底层绑定的就是浏览器DOMContentLoaded事件，触发时机为DOM树解析完成、所有同步内联/外部脚本执行完毕，早于页面window.onload事件
• window.onload需要等待页面所有关联资源（图片、样式表、iframe内嵌资源等）全部加载完成才会触发

现有方案有效性说明 #

你当前的setTimeout(..., 0)实现方案符合浏览器事件循环调度逻辑：
主页面和iframe属于独立的执行上下文，各自的任务队列由浏览器统一调度。iframe的$(document).ready回调会在自身DOM解析完成后优先入队，你在主页面iframe load事件里插入的setTimeout宏任务会排在现有已入队任务的末尾，因此可以保证extra: ready先于main: after iframe loaded执行。
该方案在Chrome、Safari等所有现代浏览器中均可正常运行，兼容性良好。

更稳妥的实现方案 #

如果iframe和主页面同域（可访问iframe内部上下文），推荐用主动检测iframe内部jQuery就绪状态的方案，完全避免事件调度的不确定性：

iframeElement.on('load', function() {
  console.log('main: iframe loaded')
  const iframeWin = this.contentWindow
  let checkTimes = 0
  // 轮询检测iframe的jQuery就绪状态
  const checkReady = () => {
    // 就绪则执行目标逻辑
    if (iframeWin.$ && iframeWin.$.isReady) {
      console.log('main: after iframe loaded')
      // 此处放你的目标业务逻辑
      return
    }
    // 超时兜底：最多等待3秒，避免iframe异常导致逻辑卡住
    if (checkTimes > 60) {
      console.error('iframe ready状态检测超时')
      return
    }
    checkTimes++
    requestAnimationFrame(checkReady)
  }
  checkReady()
})

如果iframe跨域无法访问内部上下文，保持你现有的setTimeout方案即可，这是跨域场景下唯一可行的实现方式。

优化建议 #

• 增加异常兜底逻辑：可以给iframe绑定error事件，处理iframe加载失败的场景，避免业务逻辑一直挂起
• 若后续可调整iframe侧逻辑，最可靠的方案是iframe侧ready后通过postMessage主动通知主页面，完全消除顺序依赖
• 动态创建iframe时可以提前设置sandbox等安全属性，避免iframe的恶意行为影响主页面（按需配置）

内容的提问来源于stack exchange，提问作者Carl Colijn