window.name跨域传参原理是同一窗口生命周期内所有页面共享该属性且不受同源策略限制；限制包括仅支持字符串、最大约2MB、需手动清理避免残留、iframe切换src会重置name、读取须在目标页脚本执行早期。
Window.name 跨域传参的原理和限制
Window.name 是浏览器原生支持的跨域数据传递机制，它在页面跳转后仍保持不变，且不受同源策略限制。但要注意：window.name 只能存字符串，最大长度因浏览器而异（Chrome 约 2MB，IE 低至 256KB），且所有子帧共享同一 window.name 值——如果编辑器用 iframe 加载外部预览页，iframe 的 window.name 和顶层窗口是隔离的，必须操作目标上下文的 window.name。
HTML 编辑器中安全写入 name 的时机
不能在跳转前直接赋值 window.name = 'data'，因为目标页面加载后可能覆盖该值（比如框架初始化时清空 window.name）。正确做法是在跳转前把数据写入即将打开的新窗口，或在 iframe 场景下，在 iframe 加载完成、执行任何脚本前注入数据。
- 如果是
window.open()打开预览页：在open()后立即设置newWin.name = JSON.stringify({dirty: true, cursor: 123}) - 如果是 iframe 预览：在
iframe.src设置前，先设iframe.contentWindow.name = '...'；但注意此时contentWindow可能为 null（未插入 DOM 或跨域），应确保 iframe 已挂载且调用时机在load事件之前 - 若目标页是第三方服务（如 CodePen 预览），则不可控，
window.name会被重置，此方案失效
目标页如何可靠读取并清理 name
读取必须在页面 JS 执行早期进行，否则框架（如 Vue/React）或 CMS 脚本可能已覆写 window.name。典型错误是等 DOMContentLoaded 再读——太晚了。
if (window.name) {
try {
const state = JSON.parse(window.name);
// 使用 state...
window.name = ''; // 立即清空，避免重复消费或污染后续跳转
} catch (e) {
window.name = '';
}
}
关键点：window.name 是全局可写的，不加清理会导致下一次跳转进来误读旧数据；若编辑器支持多次预览（比如热更新 iframe），每次都要重置 window.name，否则上次残留会干扰。
立即学习“前端免费学习笔记（深入）”；
为什么不用 postMessage？什么情况下必须退回到 name
postMessage 更安全、支持结构化数据，但前提是目标页主动监听——如果你无法修改预览页代码（例如嵌入外部文档托管服务），就无法接收消息。而 window.name 是唯一无需目标页配合的跨域取数方式。
- 适用场景：编辑器控制预览页加载，且预览页是你自己可控的静态 HTML（如本地
preview.html） - 不适用场景：预览页是
https://example.com/preview且你无权部署 JS - 性能无影响，但调试困难：Chrome DevTools 不显示
window.name的变更历史，只能靠console.log(window.name)插桩验证
真正容易被忽略的是 iframe 的 src 切换行为：设置 iframe.src 会触发 window.name 重置，所以必须在每次 src 赋值「之后、加载开始之前」立刻写入 name，而不是「之前」。
