在前端开发中，经常需要使用 iframe 来加载其他网页的内容。但是，在不同浏览器和设备上，iframe 的加载方式可能会有所不同，这就给前端开发带来了一些挑战。
本文将介绍如何检测跨浏览器的 iframe 内容加载，包含详细的说明、示例代码和指导意义。
检测 iframe 内容加载状态
在检测 iframe 的内容加载状态时，我们通常需要监听 iframe 的 load 事件。但是不同浏览器对于 load 事件的表现可能有所不同，下面分别介绍几种情况：
1. iframe 加载同域页面
当 iframe 加载的是同域页面时，我们可以通过以下方式来监听 load 事件：
const iframe = document.createElement('iframe');
iframe.src = 'http://example.com';
document.body.appendChild(iframe);
iframe.addEventListener('load', () => {
console.log('iframe load success!');
});在 Chrome 和 Firefox 中，以上代码可以正常监听到 iframe 的 load 事件并输出 iframe load success!。
2. iframe 加载跨域页面
当 iframe 加载的是跨域页面时，由于浏览器的同源策略，我们无法直接访问 iframe 内部的内容。此时，我们可以通过在 iframe 的 src url 上添加一个 hash 值来达到检测加载状态的目的：
-- -------------------- ---- -------
----- ------ - ---------------------------------
---------- - ----------------------------
----------------------------------
---------------------------------- ------- -- -
-- ------------- --- --------------------- -
-------
-
-- ----------- --- --------- -
------------------- ---- -----------
-
---在 iframe 内部，我们可以通过以下方式来通知父窗口：
window.parent.postMessage('loaded', 'http://yourdomain.com');在以上示例代码中，我们通过 message 事件来监听 iframe 内部的通知，如果收到了来自正确来源的 loaded 消息，则表示 iframe 加载成功。
3. iframe 加载本地文件
当 iframe 加载本地文件时，如果直接使用 load 事件来检测加载状态，可能会出现安全限制的问题。此时，我们可以使用 readystatechange 事件来代替 load 事件：
-- -------------------- ---- -------
----- ------ - ---------------------------------
---------- - ----------------------------
----------------------------------
------------------------------------------- -- -- -
-- ------------------ --- ----------- -
------------------- ---- -----------
-
---在以上示例代码中，我们通过 readystatechange 事件来监听 iframe 的加载状态，如果 readyState 变为 complete，则表示 iframe 加载成功。
指导意义
通过本文介绍的方法，我们可以跨浏览器地检测 iframe 的内容加载状态，从而提升前端开发的稳定性和可靠性。
当我们需要加载跨域页面时，可以使用 hash 值来通知父窗口；当我们需要加载本地文件时，可以使用 readystatechange 事件来检测加载状态。这些技巧不仅可以解决实际问题，还能够提升我们对于前端技术的深度理解和应用能力。
总结
本文介绍了如何检测跨浏览器的 iframe 内容加载状态，包含了同域页面、跨域页面和本地文件三种情况。我们通过示例代码和详细说明来帮助读者深入理解，并指导其在实际开发中应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12304
