如何在iframe加载失败时重定向至自定义错误HTML文件？

步骤1：创建错误提示页面 #

先新建一个error.html文件，用于展示加载失败的提示信息，示例代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>加载错误</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f8d7da;
            color: #721c24;
        }
        .error-box {
            text-align: center;
            padding: 2rem;
            border-radius: 6px;
            background-color: #fff;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="error-box">
        <h1>发生错误</h1>
        <p>页面无法加载，请检查文件是否存在或路径是否正确。</p>
    </div>
</body>
</html>

步骤2：修改原iframe页面代码 #

在你的主页面中，通过监听iframe的error事件处理加载失败情况，同时补充load事件判断覆盖特殊场景，修改后的完整代码如下：

<!doctype html>
<html lang="en">
<head>
    <link rel="icon" type="image/x-icon" href="./images/htmlicon.png">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML GIZMO</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        iframe {
            display: block;
            width: 100%;
            height: 100vh;
            border: none;
        }
    </style>
</head>
<body>
    <iframe id="contentFrame"></iframe>
    <script>
        const targetPageUrl = './main/home.html';
        const errorPageUrl = './error.html';
        const iframe = document.getElementById('contentFrame');

        // 监听加载失败事件，直接切换到错误页面
        iframe.addEventListener('error', () => {
            iframe.src = errorPageUrl;
        });

        // 补充：同源场景下检查加载内容是否为错误页面（如404）
        iframe.addEventListener('load', () => {
            try {
                const doc = iframe.contentDocument || iframe.contentWindow.document;
                // 根据实际情况调整判断条件，比如检查标题或页面内容
                if (doc.title.includes('404') || doc.body.innerText.includes('404')) {
                    iframe.src = errorPageUrl;
                }
            } catch (err) {
                // 跨域时无法访问iframe内容，忽略错误即可
            }
        });

        iframe.src = targetPageUrl;
    </script>
</body>
</html>

关键说明 #

• error事件：当iframe无法加载目标资源（如文件被删除、路径错误、网络中断）时触发，直接切换到错误页面。
• load事件补充判断：部分场景下服务器返回404但仍返回HTML页面，不会触发error事件，此时通过检查加载后的文档内容判断是否加载失败（仅同源场景有效）。
• 跨域兼容：如果iframe加载外部域名资源，无法访问其内容，try-catch会捕获错误，不影响正常逻辑。

内容的提问来源于stack exchange，提问作者EnQuire