iframe有哪些加载事件
iframe是一种HTML标签，它可以将一个HTML文档嵌入到另一个HTML文档中。在实际开发中，我们常常需要检测iframe的加载状态，如何监听iframe的加载事件呢？
1. onload事件
iframe标签支持一个名为onload的事件属性，它会在iframe加载完成时触发。当iframe的src属性中的文档加载完成时，就会触发onload事件。我们可以在父文档中为iframe元素添加onload处理程序，以便在iframe加载内容时做出响应。
下面是一个使用onload事件的示例：
<iframe src="http://www.example.com" onload="alert('iframe loaded')"></iframe>
在这个例子中，当iframe的内容加载完成时，会出现一个警告框。
2. onreadystatechange事件
IE浏览器提供了一个名为onreadystatechange的事件属性。这个事件会在iframe的readyState属性发生变化时触发。readyState属性表示iframe的加载状态，它有如下几个值：
uninitialized - 还没有调用open()方法
loading - 正在加载文档
loaded - 已经加载文档，但不包括子资源，如图片等
interactive - 已经加载文档和子资源，但文档仍在解析中
complete - 文档和子资源已经完成加载
基于readyState属性，我们可以编写一段JavaScript代码来监听iframe的加载状态。下面是一个示例：
<iframe id="myIframe" src="http://www.example.com"></iframe>
<script>
var iframe = document.getElementById('myIframe');
iframe.onreadystatechange = function() {
if (iframe.readyState === 'complete') {
// do something...
}
};
</script>
在这个例子中，当iframe的readyState属性变为complete时，就会执行相应的处理程序。
3. DOMContentLoaded事件
DOMContentLoaded事件会在iframe的文档加载完成后触发。它类似于document的DOMContentLoaded事件，不过它只在iframe的文档加载完成时触发，不会等待子资源（如图片）加载完成。
要为iframe添加DOMContentLoaded事件处理程序，可以使用以下代码：
<iframe id="myIframe" src="http://www.example.com"></iframe>
<script>
var iframe = document.getElementById('myIframe');
iframe.addEventListener('DOMContentLoaded', function() {
// do something...
});
</script>
在这个例子中，当iframe的文档加载完成后，就会执行相应的处理程序。
4. message事件
message事件用于在iframe和父窗口之间传递消息。当iframe向其父窗口发送消息时，父窗口的message事件处理程序就会执行。我们可以在父窗口中为iframe元素添加message事件处理程序，以便接收来自iframe的消息。
下面是一个使用message事件的示例：
<iframe id="myIframe" src="http://www.example.com"></iframe>
<script>
window.addEventListener('message', function(event) {
if (event.source === document.getElementById('myIframe').contentWindow) {
// do something...
}
});
</script>
在这个例子中，当iframe向其父窗口发送消息时，会执行相应的处理程序。
总结
iframe的加载事件包括了onload事件、onreadystatechange事件、DOMContentLoaded事件和message事件。不同的事件可以用来满足不同的需求，例如检测iframe的加载状态、接收来自iframe的消息等。
在实际开发中，我们应该根据具体的需求，选择合适的事件来对iframe进行监听。