在线执行环境中 document.write 一调就清屏，因为页面加载完成后调用会触发 document.open("text/html", "replace") 清空整个文档。
为什么在线执行环境里 document.write 一调就清屏
因为绝大多数在线执行环境（如 JSFiddle、CodePen、浏览器控制台、甚至某些编辑器内置预览）在页面加载完成后才运行你的脚本，此时 document.readyState 已是 "complete"，文档流关闭。一旦调用 document.write()，浏览器会隐式执行 document.open("text/html", "replace")，清空整个 document.documentElement 并重建空白文档流——你看到的“白屏”或只剩写入内容，就是这个机制的直接结果。
如何快速识别当前是否已处于危险状态
执行以下检查即可确认是否已触发覆写条件：
-
document.readyState === "complete"→ 危险，不能再用document.write -
typeof document.write === "function"→ 存在，但不等于安全 - 在
window.onload、DOMContentLoaded或任意按钮点击回调中调用document.write→ 必然覆写
最稳妥的屏蔽方案：重写 document.write 行为
在脚本最顶部（早于任何可能调用它的代码）插入如下覆盖逻辑，把危险操作转为无害输出：
if (document.readyState === "complete") {
const originalWrite = document.write;
document.write = function(...args) {
console.warn("[blocked] document.write ignored — page already loaded");
// 可选：将内容追加到 body 末尾，模拟“写入”效果
document.body.insertAdjacentText("beforeend", args.map(String).join(""));
};
document.writeln = function(...args) {
document.write(...args, "\n");
};
}
注意：document.write 是只读属性（在现代浏览器中），所以需在它被冻结前尽早劫持；若环境已锁定该属性（如某些沙箱），则必须改用 innerHTML 或 textContent 替代。
替代方案选型要点：什么情况下该用 innerHTML 而不是重写 write
重写 document.write 适合调试遗留代码或教学演示；生产级在线环境应直接规避它。选用替代方式时注意：
- 要写入 HTML 结构（含标签）→ 用
element.innerHTML = htmlString，但需确保来源可信，否则有 XSS 风险 - 只写纯文本 → 用
element.textContent = text，更安全且不会解析标签 - 想追加而非替换 → 优先
element.insertAdjacentHTML("beforeend", html)，避免反复重绘 - 目标元素不存在 → 先
document.querySelector或document.getElementById判空，否则报错中断执行
真正容易被忽略的是：很多在线环境会自动包裹你的代码进 DOMContentLoaded 或 load 回调，你写的 document.write 看似“没包”，其实已被环境悄悄延迟执行——务必查 document.readyState，别信直觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
