在前端开发中，我们经常需要在网页中嵌入外部页面或者第三方组件。这时候，就需要使用到iframe标签了。但是，由于iframe内部的内容是异步加载的，如果我们需要对加载完成后进行一些操作，就需要使用回调函数。
什么是回调函数？
回调函数是指在某个条件成立之后，由系统自动调用执行的函数。在JavaScript中，回调函数通常作为参数传递给其他函数，并在特定事件发生时被调用执行。比如，监听一个按钮点击事件，当按钮被点击时，回调函数就会被触发执行。
iframe的load事件
在使用iframe时，我们可以监听它的load事件来判断它是否已经加载完成。load事件会在整个iframe及其内部的所有资源（包括图像、样式表和脚本）都已经加载完成后触发。因此，我们可以利用这个事件来执行一些操作，比如获取iframe内部的元素或者改变其样式等。
下面是一个简单的示例代码：
<iframe id="myIframe" src="http://example.com"></iframe>
<script>
const iframe = document.getElementById('myIframe');
iframe.addEventListener('load', function() {
console.log('iframe loaded!');
// do something here
});
</script>在这个例子中，我们创建了一个id为myIframe的iframe，并添加了load事件监听器。当iframe加载完成后，回调函数就会被触发执行，并在控制台输出"iframe loaded!"。
需要注意的是，如果iframe加载的页面与当前页面不在同一个域名下，那么由于浏览器的同源策略限制，我们将无法获取到iframe内部的内容。这时候，我们可以使用postMessage API来实现跨域通信。
跨域通信
postMessage API允许我们在不同窗口（包括不同域名）之间安全地传递信息。在iframe中，我们可以使用postMessage方法向父窗口发送消息，同时也可以在父窗口中监听message事件来接收子窗口发送的消息。
下面是一个示例代码：
-- -------------------- ---- -------
---- ----- ---
------- ------------- ----------------------------------
--------
----- ------ - ------------------------------------
------------------------------- ---------- -
--------------------------------------- ---- --------- ----------------------
---
---------------------------------- --------------- -
--------------------- ------- ---- -------- ------------
---
---------
---- ----- ---
--------
---------------------------------- --------------- -
--------------------- ------- ---- --------- ------------
-- ----------- --- ------ ---- --------- -
-------------------------------- ---- -------- -----
-
---
---------在这个例子中，父窗口中的load事件监听器会在iframe加载完成后向子窗口发送一条消息。子窗口中的message事件监听器会在接收到父窗口发送的消息后，向父窗口回复一条消息。父窗口中的message事件监听器又会接收到子窗口发送的消息，并在控制台输出它。
需要注意的是，由于postMessage API是异步的，因此我们需要确保在接收到子窗口的消息后再执行相应的操作。
结语
在本文中，我们介绍了如何使用回调函数来判断iframe是否加载完成，并详细讲解了跨域通信的实现方式。希望这篇文章能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9852
