判断 iframe 是否加载完毕

封面图 • 2026-01-08 • JavaScript

在 JavaScript 中，判断一个 `<iframe>` 是否加载完毕可以通过监听 `load` 事件来实现。以下是一些常见的方法：

---

### ✅ 方法一：使用 `onload` 事件

```html
<iframe id="myIframe" src="https://example.com"></iframe>

iframe.onload = function() {
    console.log('iframe 加载完成');
    // 在这里执行你想要的操作
  };
</script>
```

---

### ✅ 方法二：使用 `addEventListener`

```html
<iframe id="myIframe" src="https://example.com"></iframe>

iframe.addEventListener('load', function() {
    console.log('iframe 加载完成');
    // 在这里执行你想要的操作
  });
</script>
```

---

### ⚠️ 注意事项

1. **跨域问题**：如果 iframe 的源（`src`）与当前页面不在同一个域名下，那么你无法通过 JavaScript 访问 iframe 的内容（如 `contentDocument` 或 `contentWindow`），但仍然可以监听 `load` 事件。

2. **动态添加的 iframe**：如果你是通过 JavaScript 动态创建 iframe，确保在添加到 DOM 后再绑定事件。

---

### 示例：动态创建 iframe 并监听加载

```html
<script>
  const iframe = document.createElement('iframe');
  iframe.src = 'https://example.com';
  iframe.id = 'dynamicIframe';

iframe.onload = function() {
    console.log('动态创建的 iframe 加载完成');
  };

document.body.appendChild(iframe);
</script>
```

---

如果你需要访问 iframe 内部的内容（比如操作其中的 DOM），请确保它们是**同源**的，否则会受到浏览器的安全策略限制。

---

是否需要我提供如何在 iframe 加载完成后获取其内容或调用其函数？