document.write()在页面加载完成后调用会清空整个页面，因其隐式触发document.open()重开文档流；应避免在DOMContentLoaded、load事件或在线运行器中使用，改用innerHTML或textContent。
直接用浏览器就能跑 HTML，根本不需要装软件、配环境、起服务器——只要代码合法、结构完整，iframe 或 data: URL 就能当场渲染。但“能跑”不等于“跑得稳”，很多初学者卡在空白页、控制台报错、样式不生效这些地方，问题往往出在执行上下文或协议限制上，而不是代码本身。
为什么 document.write() 在在线运行器里会清空整个页面
这是最典型的“写完就没了”现象：你加了一行 document.write("hello")，预览区反而变白了。原因很简单——document.write() 在文档加载完成后调用，会隐式触发 document.open()，把当前文档流清空重开。
- 在线编辑器（如 CodePen、JSFiddle）的预览区本质是独立
iframe，HTML 内容由父页注入，属于“已加载完成”状态 - 除非你把
document.write()放在<script>标签里且确保它在</html>之前执行，否则一律视为 late write - 替代方案更安全：
document.body.innerHTML += "hello"或element.textContent = "hello"
用 data:text/html, URL 直接运行 HTML 片段的边界条件
很多人试过把 HTML 代码 URL 编码后拼进 data:text/html, 然后用 window.open() 打开，结果弹出空白页或解析失败。这不是浏览器 bug，而是 MIME 类型和编码规则没对齐。
-
data:URL 的 content-type 必须显式声明为text/html，不能省略；data:,...默认是text/plain，浏览器不会当 HTML 解析 - 中文、引号、换行符必须严格
encodeURIComponent()，比如<div>你好</div>要转成%3Cdiv%3E%E4%BD%A0%E5%A5%BD%3C%2Fdiv%3E - 超过约 2MB 的内容在部分浏览器（尤其是 Safari）会截断或拒绝加载，别指望它跑整站 demo
为什么本地双击打开的 .html 文件里，fetch("/api/data.json") 报错
错误信息通常是 Failed to fetch 或 CORS error，但你根本没开服务器——这其实是浏览器的 file:// 协议限制，不是代码写错了。
立即学习“前端免费学习笔记（深入）”；
-
file://下发起的fetch、XMLHttpRequest、import()全部被现代浏览器默认拦截，哪怕目标是同目录下的 JSON 文件 - 在线运行器（如 CodeSandbox、Replit）用的是
https://或http://localhost，天然绕过该限制 - 临时解法只有两个：
live-server启一个本地 HTTP 服务，或改用在线环境测试带请求的逻辑
自建沙箱 iframe 时，sandbox 属性漏配导致 JS 不执行
你想用 <iframe sandbox="..."> 安全地运行用户输入的 HTML，但发现里面写的 alert(1) 没反应，连控制台都静悄悄。
-
sandbox默认禁用所有能力，包括脚本执行、表单提交、插件、弹窗等，必须显式开启：sandbox="allow-scripts allow-same-origin" -
allow-same-origin很关键：没有它，iframe 内 JS 就算执行了，也无法读写自己的document或访问localStorage - 但注意：
allow-same-origin+allow-scripts组合仍存在风险，无法防御 DOM XSS；生产环境建议用srcdoc替代src，并过滤掉内联事件属性（如onclick）
真正难的不是让 HTML “跑起来”，而是搞清楚它在哪种上下文里被解析、受哪些协议/策略约束、哪些行为看似合理实则被浏览器静默拦截——这些细节不查 MDN 文档、不看 DevTools 的 Security 标签页，光靠试错很难定位。
