如何检测iframe是否完全加载（含所有资源）？非load事件方案

云原生阿岚

2026-7-17

检测iframe是否完全加载（含所有资源）的方案

以下是几个可行的方案，满足你不依赖load事件、检测iframe完全加载（含所有资源）以及判断是否还能绑定load事件的需求：

利用contentDocument.readyState的complete状态
你提到认为readyState仅能判断文档加载，但实际上这个属性的complete值表示文档及其所有关联资源（图片、样式、脚本、字体等）都已加载完成，和图片的complete属性语义完全匹配。可以直接用以下代码判断：
```
function isIframeFullyLoaded(iframe) {
  const targetDoc = iframe.contentDocument || iframe.contentWindow.document;
  return targetDoc.readyState === 'complete';
}
```

精准检查所有子资源加载状态（同域场景）
如果需要逐个确认资源的加载情况（比如排查特定资源是否未加载），可以借助性能API遍历iframe内的所有资源条目，过滤出未完成加载的资源：

function checkAllIframeResourcesLoaded(iframe) {
  // 仅同域iframe可访问performance数据，跨域会触发权限错误
  const resourceEntries = iframe.contentWindow.performance.getEntriesByType('resource');
  // responseEnd为0表示资源尚未加载完成
  const unfinishedResources = resourceEntries.filter(entry => entry.responseEnd === 0);
  return unfinishedResources.length === 0;
}

判断是否还能绑定load事件
要确认是否还有必要绑定iframe的load事件，只需检查文档的readyState状态：
```
function canBindIframeLoad(iframe) {
  const targetDoc = iframe.contentDocument || iframe.contentWindow.document;
  // 当readyState不为complete时，说明文档仍在加载中，绑定load事件仍会触发
  return targetDoc.readyState !== 'complete';
}
```
补充：如果readyState已经是complete，说明iframe的load事件已经触发过，此时再绑定不会执行，无需浪费资源。