在前端开发中，我们经常需要在网页中加载其他页面或内容。其中，iframe标签就是一种用来嵌入其他网页或文档的标记语言元素，可以通过设置src属性来指定要加载的资源。
然而，在某些场景下，我们希望能够实时地检测到iframe的src属性是否发生了变化，以便及时做出响应。那么，如何检测iframe的src改变事件呢？本文将为您介绍几种有效的方法。
方法一：使用 MutationObserver
MutationObserver是一个新的API，它可以监视DOM树的变化，并在变化发生时执行回调函数。因此，我们可以通过监听iframe元素的attributes属性变化来检测src属性的改变。
示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------------
-------
------
------- --------------------------- -----------------------
--------
----- ------ - ------------------------------------
----- -------- - --- ---------------------------------------- -
------- -------- -- -------------- -
---------------- --- ------------ -- ---------------------- --- ------ -
-------------------------------
-
-
---
------------------------ - ----------- ---- ---
---------
-------
-------上面的代码中，我们在页面中创建了一个iframe元素，并指定了一个初始的src属性。接着，使用MutationObserver监听iframe元素的attributes属性变化，并在回调函数中检测其src属性是否发生了改变。
方法二：使用 window.postMessage
window.postMessage是一种跨域通信机制，它可以让不同域之间的窗口相互发送消息。我们可以在iframe中嵌入一个子页面，然后通过postMessage方法将消息发送给父页面来通知其src属性已经改变。
示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------------
-------
------
------- --------------------------- -----------------------
--------
----- ------ - ------------------------------------
------------- - ---------- -
------------------------------------- --------- -----
--
---------------------------------- --------------- -
------------- --- ---- --------- -
-------------------------------
-
---
---------
-------
-------上面的代码中，我们在iframe的onload事件中向其子页面发送一个消息'src changed'，并设置接收方为所有域（'*'）。然后，在父页面中监听window对象的message事件，当接收到'src changed'消息时，即可判定iframe的src属性已经改变。
方法三：使用定时器轮询
最后，我们可以通过设置一个定时器，每隔一段时间检查一次iframe的src属性是否发生了变化，以此达到检测的目的。这种方法比较简单，但需要注意定时器的频率不要过高，否则会影响性能。
示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------------
-------
------
------- --------------------------- -----------------------
--------
----- ------ - ------------------------------------
--- ------ - -----------
---------------------- -
------------- --- ------- -
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------