data: URL方案可直接在浏览器地址栏运行HTML，无需服务器或第三方平台，所有代码在本地原始上下文中执行，零网络请求、零上传、最接近双击打开HTML文件的效果。
直接用浏览器自带的 data: URL 协议就能实现，无需服务器、不依赖第三方平台、不上传代码到任何地方。
为什么不用 CodePen 或 JSFiddle？
这些平台确实开箱即用，但它们默认把你的代码发到远程服务器做预处理（比如自动补全 <html>、注入沙箱脚本），还可能记录操作行为；更关键的是——你写的 JS 会运行在它们的域下，document.cookie、localStorage、fetch() 等行为受其上下文限制，和真实页面表现不一致。
而 data: URL 是纯前端、纯本地、无网络请求的执行路径，所有 DOM、JS、样式都跑在你当前浏览器标签页的原始上下文中，最接近“保存为 .html 后双击打开”的效果，只是省去了保存文件这一步。
一行命令生成可运行的 data URL
把下面这段代码复制进浏览器地址栏（注意：是地址栏，不是控制台），回车即可立即看到一个空白可编辑页面：
立即学习“前端免费学习笔记（深入）”；
data:text/html;charset=utf-8,<html><head><meta charset="utf-8"><title>HTML Test</title></head><body contenteditable="true" style="font-family:system-ui, sans-serif; padding:1rem; line-height:1.6;"><h2>开始写 HTML</h2><p>直接在这里输入或粘贴代码，比如：<br><code><p>Hello <strong>World</strong></p></code></p><script>document.body.addEventListener('input',()=>{history.replaceState(null,'',`data:text/html;charset=utf-8,${encodeURIComponent(document.documentElement.outerHTML)}`)});</script></body></html>
这个页面的特点：
-
contenteditable="true"让整个<body>可编辑，所见即所得 - 每次输入都会触发
input事件，自动更新地址栏 URL，刷新后仍保留最新内容 -
encodeURIComponent()确保中文、引号、尖括号等字符被正确编码，避免解析失败 - 不依赖任何外部资源，连 CSS 和 JS 都内联，真正零依赖
遇到 JS 不执行？检查这三点
很多人粘贴带 <script> 的代码进去后发现逻辑没跑，常见原因如下：
-
<script>标签必须闭合，<script src="..."/>这种自闭合写法在data:URL 中无效，浏览器会忽略 - 如果 JS 里用了
document.write()，它会清空整个文档，导致页面变白——这是预期行为，不是 bug - 跨域限制依然存在：哪怕 URL 是
data:，AJAX 请求仍受同源策略约束，fetch('https://api.example.com')会失败，除非目标支持 CORS
调试建议：在编辑时按 F12 打开开发者工具，切到 Console 面板，看是否有 SyntaxError 或 Uncaught ReferenceError —— 这类错误往往是因为粘贴时漏了引号或分号，或者用了 ES6+ 语法但浏览器版本太老。
想加 CSS 或外部库？手动注入比改 URL 更可靠
硬编码在 data: URL 里会让链接极长，且容易因编码问题失效。更稳妥的做法是，在可编辑页面中直接插入：
<style>
body { background: #f8f9fa; }
h2 { color: #333; }
</style>
或动态加载 CDN：
<script>
const s = document.createElement('script');
s.src = 'https://cdn.jsdelivr.net/npm/vue@3.4.21/dist/vue.global.min.js';
document.head.appendChild(s);
</script>
注意：<link rel="stylesheet"> 和 <script src> 在 contenteditable 区域里粘贴后不会自动执行，必须用 JS 动态创建并 append 才生效。
真正容易被忽略的一点：这个方案无法模拟 file:// 协议下的限制（比如读取本地文件），但它也避开了 file:// 下的更多限制（如 fetch 跨域报错、import 不支持）。如果你要测的功能恰好卡在这两个协议的差异上，就得切回本地服务器方案。
