在前端开发中，经常需要使用 <iframe> 标签嵌入其他网站或者页面来实现某些功能，比如展示地图、支付页面等。但是有时候在加载 <iframe> 内容时可能会遇到一些问题，比如网络不稳定导致加载失败，或者被嵌入的页面本身存在问题。因此，正确判断 <iframe> 内容是否成功加载非常重要。
方法一：利用 onload 事件判断
<iframe> 标签提供了 onload 事件，可以在 iframe 内容被成功加载后触发。可以利用该事件来判断 iframe 是否成功加载了内容。示例代码如下：
<iframe src="https://example.com" onload="frameLoaded()"></iframe>
<script>
function frameLoaded() {
console.log('Iframe content has loaded successfully');
}
</script>当 <iframe> 内容成功加载后，frameLoaded() 函数会被调用，并输出日志信息。
然而，该方法并不完全可靠。由于跨域问题，如果被嵌入页面与当前页面不在同一个域名下，则无法访问 iframe 的 contentWindow 对象，因此也就无法在 onload 事件中检测 iframe 内容是否成功加载。
方法二：利用 postMessage API 跨域通信
为了解决上述跨域问题，我们可以使用 HTML5 中引入的 postMessage API 实现跨域通信。该 API 允许在不同窗口之间进行安全的数据传递，包括 iframe 和父窗口之间。
具体实现方式为：
在 iframe 中，通过 window.parent.postMessage() 方法向父窗口发送消息，表示 iframe 内容已经加载完毕；
在父窗口中，通过监听 message 事件接收到来自 iframe 的消息，并据此判断 iframe 是否成功加载了内容。
示例代码如下：
-- -------------------- ---- -------
---- - ------ --- ---
--------
------------- - ---------- -
----------------------------------------- -----
-
---------
---- ----- ---
------- ------------------------- -----------------------
--------
---------------------------------- --------------- -
-- ------------- --- ---------------------- ------- -- ----------
-- ----------- --- --------------- -
------------------- ------- --- ------ ---------------
-
---
---------当 <iframe> 内容成功加载后，iframe 页面会通过 window.parent.postMessage() 方法向父窗口发送 "iframeLoaded" 消息，父窗口页面则通过监听 message 事件接收到该消息，并据此判断 iframe 是否成功加载了内容。
总结
以上是判断 <iframe> 内容是否成功加载的两种方法：使用 onload 事件和 postMessage API 跨域通信。其中前者简单易用但不够可靠，后者能够解决跨域问题但需要较多的代码实现。在实际开发中应根据具体情况选择合适的方法，以保证 <iframe> 内容能够被成功加载并实现预期的功能。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28740