本文介绍如何在 React 组件中使用 `srcDoc` 属性创建的 iframe 中捕获 JavaScript 错误。通过监听 iframe 的 `load` 事件并检查 `contentDocument` 是否包含错误信息，可以有效地检测并处理 iframe 内容中的错误，从而提升用户体验。本文提供了一种可靠的方法来确保错误处理程序的正确触发，并提供示例代码进行演示。
在使用 React 开发过程中，有时需要在 iframe 中渲染动态 HTML/JavaScript 内容，并使用 srcDoc 属性直接将 HTML 内容注入 iframe。然而，iframe 中的 JavaScript 代码可能存在错误，导致页面出现异常。为了提升用户体验，我们需要捕获 iframe 中的 JavaScript 错误，并在出现错误时显示友好的错误提示。
监听 load 事件而非 error 事件
最初的解决方案尝试监听 iframe.contentWindow 的 error 事件，但这种方法可能存在时序问题，导致错误处理程序未能及时触发。更可靠的方法是监听 iframe 的 load 事件，并在 load 事件处理程序中检查 iframe 的 contentDocument 是否包含错误信息。
import React, { useEffect, useRef, useState } from "react";
const RenderHtml = ({ htmlBlock }: { htmlBlock: {html: string} }) => {
const iframeRef = useRef<HTMLIFrameElement>(null);
const [hasError, setHasError] = useState<boolean>(false);
useEffect(() => {
if (!iframeRef.current) return;
const iframe = iframeRef.current;
const handleLoad = () => {
// 检查 iframe 的 contentDocument 是否可访问
// 以及是否包含任何错误消息
if (iframe.contentDocument?.querySelector("body script[src^='chrome-error://']")) {
setHasError(true);
}
};
iframe.addEventListener("load", handleLoad);
return () => {
iframe.removeEventListener("load", handleLoad);
};
}, [htmlBlock.html]);
return !hasError ? (
<iframe
ref={iframeRef}
srcDoc={htmlBlock.html}
style={{
border: "none",
width: "100%",
}}
></iframe>
) : (
<div>There was an error loading the HTML content</div>
);
};
export default RenderHtml;代码解释：
立即学习“Java免费学习笔记（深入）”；
- useRef 和 useState: iframeRef 用于获取 iframe 元素的引用，hasError 用于控制是否显示错误提示。
- useEffect: 在组件挂载后，useEffect 钩子函数会被调用。它用于添加和移除 iframe 的 load 事件监听器。依赖项 [htmlBlock.html] 确保在 htmlBlock.html 发生变化时，useEffect 会重新执行。
- handleLoad: 当 iframe 加载完成时，handleLoad 函数会被调用。它检查 iframe.contentDocument 是否包含错误信息。这里使用 querySelector("body script[src^='chrome-error://']") 来检测是否存在来自 Chrome 浏览器的错误脚本。你可以根据实际情况修改这个选择器，例如检查特定的错误元素或错误消息。
- 错误处理: 如果检测到错误，setHasError(true) 会被调用，导致组件重新渲染并显示错误提示。
- 清理函数: useEffect 返回一个清理函数，用于在组件卸载或 htmlBlock.html 发生变化时移除事件监听器，防止内存泄漏。
- 条件渲染: 根据 hasError 的值，组件会渲染 iframe 或错误提示。
注意事项
- 跨域问题: 如果 iframe 的 srcDoc 内容来自不同的域，可能会遇到跨域问题，导致无法访问 contentDocument。确保 iframe 内容与主页面同源，或者正确配置 CORS。
- 错误检测方式: 示例代码中使用 querySelector("body script[src^='chrome-error://']") 检测 Chrome 浏览器的错误脚本。可以根据实际情况修改这个选择器，例如检查特定的错误元素或错误消息。
- 安全性: 在使用 srcDoc 属性时，要特别注意安全性问题。确保 htmlBlock.html 内容来自可信的来源，防止 XSS 攻击。对外部传入的 HTML 内容进行适当的过滤和转义。
总结
通过监听 iframe 的 load 事件并检查 contentDocument 是否包含错误信息，可以有效地捕获 srcDoc iframe 中的 JavaScript 错误。这种方法比监听 error 事件更可靠，并能提供更好的用户体验。同时，需要注意跨域问题和安全性问题，确保应用程序的稳定性和安全性。
