必须等待 iframe 的 load 事件触发后才能安全访问 contentdocument，跨域 iframe 完全不可访问 dom；对 about:blank iframe 需调用 open()/close() 初始化文档；srcdoc 更安全简洁，适合静态内容。
iframe.contentDocument 写入前必须确保加载完成
直接操作 iframe.contentDocument 或 iframe.contentWindow.document 会报错，常见错误是 SecurityError: Blocked a frame with origin "xxx" from accessing a cross-origin frame，或者 Cannot read property 'body' of null —— 后者往往是因为 iframe 还没加载完就尝试写入。
正确做法是监听 load 事件，且仅限同源 iframe：
const iframe = document.getElementById('myIframe');
iframe.addEventListener('load', () => {
const doc = iframe.contentDocument || iframe.contentWindow?.document;
if (doc) {
const div = doc.createElement('div');
div.textContent = '动态插入的内容';
doc.body.appendChild(div);
}
});
- 务必等
load触发后再访问contentDocument，不能靠setTimeout猜测时机 - 如果 iframe 是空的（
src="about:blank"或未设src），需先用iframe.contentDocument.open()+close()初始化文档（见下一条） - 跨域 iframe 完全不可写，JS 无权访问其 DOM，这是浏览器强制限制，无法绕过
向 about:blank iframe 写入需手动初始化文档
如果 iframe 的 src 是 about:blank 或为空，它的 contentDocument 可能存在但处于“未初始化”状态，直接 appendChild 会静默失败或抛错。
此时要显式调用 open() 和 close() 来重置文档：
const iframe = document.getElementById('myIframe');
const doc = iframe.contentDocument || iframe.contentWindow?.document;
if (doc) {
doc.open();
doc.write('');
doc.close(); // 必须 close，否则后续 append 不生效
const div = doc.createElement('div');
div.innerHTML = '<p>这是动态内容</p>';
doc.body.appendChild(div);
}
-
doc.write()会清空整个文档，适合从零构建；若只想追加，确保doc.body已存在（即已close()） -
doc.close()是关键，漏掉会导致doc.body为null或只读 - 不推荐用
write()插入大量 HTML 字符串，易 XSS，优先用createElement+textContent/innerHTML组合
用 srcdoc 替代动态写入更安全简洁
如果目标只是展示一段静态 HTML，且不需要后续 JS 交互或频繁更新，srcdoc 属性比操作 contentDocument 更可靠、无加载时序问题、自动同源、还能避免 XSS 风险（只要你不拼接用户输入）。
const iframe = document.getElementById('myIframe');
iframe.srcdoc = `
<h3>标题</h3>
<p>正文内容</p>
`;
-
srcdoc会立即替换 iframe 整个文档，无需等待load，也不受跨域限制（它本身就是同源的） - 不支持外部资源（如
<script src="..."></script>），但可内联<script></script>（注意 CSP） - 如果需要多次更新，反复赋值
srcdoc即可，比操作 DOM 更轻量
动态插入后样式和脚本的行为差异
往 iframe 中插入 HTML 后，样式和脚本不会自动继承父页面上下文，这点容易被忽略。
- 插入的
<style></style>或class不会继承父页面 CSS，必须在 iframe 内完整定义或引入 - 插入的
<script></script>在 iframe 内执行，this指向iframe.contentWindow，无法直接访问父页面变量（除非显式通过parent.xxx） - 若插入含事件监听的元素（如
button.onclick），回调函数作用域在 iframe 内，闭包捕获的变量也来自 iframe 文档环境 - 用
innerHTML插入带 script 标签的 HTML，脚本默认不执行；要用eval或动态创建 script 元素并 append 才能运行（不推荐）
contentDocument 写入最灵活但时序敏感；srcdoc 最省心但只适合静态片段；而跨域 iframe 的 DOM 操作，根本不存在“怎么做”，只有“不能做”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
