本文详解如何在通过 标签异步加载外部 HTML 文件后，正确等待其 DOM 就绪，并安全获取和修改其中的元素（如 #error-code），避免因时机不当导致的 Cannot set properties of null 错误。
本文详解如何在通过 `
在 Web 开发中，使用
根本原因在于：
✅ 正确做法是监听
// popup.js
const innerBody = document.getElementById('inner-body');
if (!innerBody) {
console.error('Element #inner-body not found');
return;
}
// 插入 object 标签（注意：避免内联样式换行，确保语法合法）
innerBody.innerHTML = '<object style="height:100%" type="text/html" data="../layout/popup_error.html"></object>';
const objectEl = innerBody.querySelector('object');
if (!objectEl) {
console.error('Object element not found in #inner-body');
return;
}
// 关键：监听 load 事件，确保嵌入内容完全加载
objectEl.addEventListener('load', function () {
try {
// 获取嵌入文档的 Document 对象
const embeddedDoc = objectEl.contentDocument;
if (!embeddedDoc) {
throw new Error('Embedded document is not accessible (CORS or same-origin policy violation?)');
}
const errorCodeEl = embeddedDoc.getElementById('error-code');
if (!errorCodeEl) {
throw new Error('Element #error-code not found in embedded document');
}
errorCodeEl.innerText = '404 Not Found';
} catch (err) {
console.error('Failed to update error code:', err);
}
});
⚠️ 重要注意事项：
- 同源限制（Same-Origin Policy）：contentDocument 仅在 data 指向同协议、同域名、同端口的资源时可访问。若 popup_error.html 位于不同源（如本地 file:// 协议加载远程资源），将抛出安全错误。开发阶段建议使用本地服务器（如 http-server 或 VS Code Live Server）启动项目。
- 不要重复引入脚本：popup_error.html 中不应再次引入 popup.js（当前代码中已存在），否则会导致脚本执行两次甚至冲突。应仅在主页面 popup.html 中引入一次。
- 避免 innerHTML + object 的冗余操作：若仅需加载静态 HTML 片段，更推荐使用 fetch() + insertAdjacentHTML()（现代方案），或 iframe（兼容性更好）。
? 替代方案（推荐用于新项目）：
// 使用 fetch 替代 object 标签（更可控、无跨域黑盒问题）
fetch('../layout/popup_error.html')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.text();
})
.then(html => {
innerBody.innerHTML = html;
const errorCodeEl = innerBody.querySelector('#error-code');
if (errorCodeEl) errorCodeEl.textContent = '404 Not Found';
})
.catch(err => console.error('Failed to load error template:', err));
综上，解决该问题的核心是明确加载时机与正确访问嵌套文档上下文。始终优先监听加载完成事件，再操作目标元素，并做好异常防护与跨域验证，方可实现稳定可靠的动态内容注入与更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
