How to execute javascript callback when IFRAME is finished loading?

在Web开发中，<iframe> 元素常用于在当前页面中嵌入另一个页面。监听iframe的加载完成是一个常见的需求，尤其是当你需要在iframe完全加载后执行某些操作时。

使用 onload 事件

JavaScript 提供了一个非常直接的方法来监听 iframe 的加载完成，那就是 onload 事件。这个事件会在 iframe 中的内容完全加载完成后触发。

示例代码：

html
<iframe id="myIframe" src="https://example.com" onload="iframeLoaded()"></iframe>
<script>
function iframeLoaded() {
    console.log('IFrame 完全加载完成');
    // 在这里可以安全地操作iframe的DOM或执行其他任务
}
</script>

在上面的示例中，<iframe> 元素设置了一个 onload 属性，该属性绑定到一个名为 iframeLoaded 的函数。当 iframe 加载完成时，这个函数将被调用。

注意事项

1. 跨域限制：如果iframe加载的页面与父页面不同源，则由于浏览器的同源策略，你将无法访问iframe内部的DOM。

2. 多次加载：如果iframe的内容在加载后还会发生变化（比如内部导航），onload 事件可能会被触发多次。

3. 动态创建的iframe：如果iframe是通过JavaScript动态添加到页面的，你需要在将其插入DOM之前设置onload事件，以避免错过加载事件。

动态创建iframe示例：

javascript
var iframe = document.createElement('iframe');
iframe.onload = function() {
    console.log('动态创建的IFrame 加载完成');
};
iframe.src = "https://example.com";
document.body.appendChild(iframe);

结论

通过使用onload事件，我们可以有效地监听到iframe的加载完成。这在处理嵌入的外部内容和资源时非常有用，但要注意处理可能的跨域问题和事件触发的时机。在开发中，合理使用这些技巧可以帮助我们更好地控制页面行为和用户交互。