浏览器拦截非用户主动触发的window.open()，必须在click等可信事件处理器中直接调用，并显式设置width/height；推荐先开空白窗口再注入HTML+内联CSS，通过postMessage通信实现关闭反馈。
弹出窗口被拦截怎么办
浏览器默认会拦截非用户主动触发的 window.open()，比如在异步回调（setTimeout、fetch.then）、事件委托或 React 的 useEffect 里直接调用，都会失败。必须确保调用发生在用户手势上下文内——也就是绑定在 click 或 keydown（且 event.isTrusted === true）这类原生事件处理器中。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 预览按钮的
onclick或 React 中的onClick回调里直接调用window.open()，不要包一层 Promise 或 setTimeout - 如果编辑器内容需先序列化再传入新窗口，把序列化逻辑放在事件处理器内，而非之后的异步流程中
- Chrome/Firefox 会静默阻止无尺寸参数的弹窗，务必显式传入
width和height，例如'width=1024,height=768'
如何把编辑器 HTML 安全注入新窗口
不能直接用 window.open().document.write() 写入含脚本或内联样式的内容，现代浏览器会因 CSP 或 DOM 污染拒绝执行；更稳妥的方式是打开一个空白页后，用 document.documentElement.innerHTML 替换整个结构，并手动设置 <base> 防止相对路径失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先用
window.open('', '_blank', 'width=1200,height=800')打开空白窗口，获取引用：const previewWin = window.open(...) - 检查
previewWin是否为 null（拦截时返回 null），再执行后续操作 - 用
previewWin.document.open()→previewWin.document.write(htmlString)→previewWin.document.close()流程，比直接赋值innerHTML更可靠 - 若原始 HTML 含
<script src="..."></script>，确保目标域名允许跨域加载，或改用内联<script></script>并注意 CSP 限制
预览页样式和交互怎么保持一致
新窗口默认没有父页面的 CSS，编辑器渲染的样式（如 contenteditable 的排版、自定义字体、代码高亮类名）会丢失。也不能靠 @import 或 <link rel="stylesheet"> 动态加载，因为新窗口可能没权限访问父域资源（尤其本地 file:// 协议）。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把编辑器依赖的核心 CSS 提取成字符串，在写入 HTML 前拼进
<style>标签里（可用getComputedStyle或预编译 CSS 文本） - 避免依赖 JS 控制的动态样式（如通过 class 切换实现的主题色），这类行为在新窗口里不会自动同步
- 如果编辑器用了第三方富文本库（如 Quill、Tiptap），确认其生成的 HTML 是 self-contained —— 即不依赖运行时 JS 注入样式
- 测试时用
file://打开页面会触发 CORS，建议始终在http://localhost或真实服务下验证
关闭预览窗口后如何通知父页
用户关掉预览页后，父页面无法自动感知，但有时需要刷新状态或释放资源。不能依赖 previewWin.closed 轮询（性能差且不准），更合理的是让预览页主动通信。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在预览页加载完成后，执行
window.opener?.postMessage('preview_closed', '*') - 父页监听
window.addEventListener('message', e => { if (e.data === 'preview_closed') { /* 清理逻辑 */ } }) - 注意：若预览页被用户强制关闭（如任务管理器杀进程），
message可能收不到，可加 3 秒超时兜底 - 不要用
previewWin.onunload，该事件在多数浏览器中对弹窗不可靠
父页面和预览页之间的 DOM 独立性是根本前提，任何试图共享变量、直接操作对方 document 的做法都容易失败。最稳的路径就是“单向传递 HTML 字符串 + 预置样式 + postMessage 回调”。
