在 HTML 中使用 `<iframe>` 元素嵌入其他页面时，我们可能需要知道这个 `iframe` 何时完成加载，以便执行一些动作。如果你使用的是原生 JavaScript，可以通过监听 `iframe` 的 `load` 事件来捕获加载完成的时刻。下面是如何实现的代码示例：

```html
<!DOCTYPE html>
<html>
<head>
    <title>Iframe Load Event Example</title>
</head>
<body>

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

<script>
    // 获取 iframe 元素
    var iframe = document.getElementById('myIframe');
    
    // 添加事件监听器，监听 load 事件
    iframe.addEventListener('load', function() {
        alert('Iframe 加载完成!');
        // 在这里执行你的代码
    });
</script>

</body>
</html>
```

这段代码中，当 `iframe` 的 `src` 属性所指向的内容加载完成时，会弹出一个 `alert` 框提示 "Iframe 加载完成!"。你可以在事件处理函数中替换为你需要执行的代码。

如果你使用的是 jQuery，可以使用以下方式来监听 `iframe` 的加载完成事件：

```html
<!DOCTYPE html>
<html>
<head>
    <title>Iframe Load Event Example with jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

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

<script>
    // 使用 jQuery 来选择 iframe 并监听 load 事件
    $('#myIframe').on('load', function() {
        alert('Iframe 加载完成!');
        // 在这里执行你的代码
    });
</script>

</body>
</html>
```

请注意，由于同源策略的限制，如果 `iframe` 加载的是跨域内容，你可能无法访问 `iframe` 内容的细节，但是 `load` 事件仍然会被触发。如果你需要与 `iframe` 内的页面进行交互，那么这两个页面需要有适当的跨域通信机制，如窗口 `postMessage` 方法。

Capture iframe load complete event

1个答案

你的答案