如何在弹出窗口中正确使用 FileSystem API 保存文件

FileSystem API 的 showSaveFilePicker() 在弹出窗口（popup）中调用时无法完成写入，仅生成空文件且无错误日志——根本原因是跨浏览上下文的安全限制，需通过模态层替代原生 popup 或确保 HTTPS 上下文隔离来解决。

filesystem api 的 `showsavefilepicker()` 在弹出窗口（popup）中调用时无法完成写入，仅生成空文件且无错误日志——根本原因是跨浏览上下文的安全限制，需通过模态层替代原生 popup 或确保 https 上下文隔离来解决。

现代浏览器的 File System Access API（如 showSaveFilePicker）严格遵循用户手势（user gesture）与安全上下文（secure context）双重约束。当从 window.open() 创建的弹出窗口中调用该 API 时，尽管你显式传入 win 参数并满足“同一窗口调用”条件，仍会遭遇静默失败：createWritable() 返回的 Promise 既不 resolve 也不 reject，导致后续 .write() 和 .close() 无法执行，最终仅创建零字节文件。

这并非代码逻辑错误，而是浏览器有意为之的安全设计：popup 窗口默认不具备持久化存储权限上下文，尤其在 file:// 协议或非 HTTPS 本地开发环境中，其浏览上下文被视为“降级”（degraded），即使满足用户手势（如点击事件），createWritable() 仍可能被静默拒绝（不抛异常、不触发 catch 回调）。

✅ 推荐解决方案：用模态层（Modal Overlay）替代原生 popup

最简洁、兼容性最佳的实践是放弃 window.open()，改用 DOM 模态层模拟编辑窗口：

<!-- 主页面中 -->
<p id="editor-modal" style="display:none; position:fixed; z-index:1000; top:20%; left:50%; transform:translateX(-50%); width:80%; max-width:600px; background:white; border:1px solid #ccc; box-shadow:0 4px 12px rgba(0,0,0,0.15); padding:20px;">
  <textarea id="edit-area" rows="10" style="width:100%; font-family:monospace;"></textarea>
  <p style="margin-top:12px; text-align:right;">
    <button onclick="saveFromModal()">保存</button>
    <button onclick="document.getElementById('editor-modal').style.display='none'">取消</button>
  </p>
</p>

// 复用原有 storeText 函数（无需修改）
async function saveFromModal() {
  const text = document.getElementById('edit-area').value;
  await storeText(text, window); // 直接传入主 window，确保上下文合法
  document.getElementById('editor-modal').style.display = 'none';
}

// 调用示例：打开模态框
function openEditor(initialText = "") {
  document.getElementById('edit-area').value = initialText;
  document.getElementById('editor-modal').style.display = 'block';
}

✅ 优势：

• 完全复用主窗口的 window 对象，100% 满足 API 的安全上下文要求；
• 无跨域/协议限制，file:// 本地测试亦可工作；
• 用户体验更可控（可拖拽、响应式、无障碍支持）；
• 避免 popup 被浏览器拦截器屏蔽。

⚠️ 替代方案：HTTPS 托管的独立页面（适用于复杂场景）

若必须使用独立窗口（如需多进程编辑、插件集成等），应部署为 HTTPS 服务下的独立页面（如 https://yourdomain.com/editor.php），并通过 POST 传递待编辑数据：

// 主窗口中
const popup = window.open('https://yourdomain.com/editor.php', '_blank');
popup.postMessage({ data: "initial content" }, 'https://yourdomain.com');

// editor.php 中监听并调用 storeText（此时 window 是 HTTPS 上下文）
window.addEventListener('message', async (e) => {
  if (e.origin === 'https://yourdomain.com') {
    await storeText(e.data.data, window); // ✅ 合法上下文
  }
});

⚠️ 注意：file:// 协议、HTTP 站点、或跨源 iframe 均无法触发 showSaveFilePicker 的完整生命周期——这是浏览器强制策略，无法绕过。

总结

• ❌ 不要依赖 window.open() 创建的 popup 调用 File System API；
• ✅ 优先采用 CSS 模态层 + 主窗口 window 引用，兼顾安全性与开发效率；
• ? 若必须独立窗口，务必确保其运行于 HTTPS 上下文，并通过 postMessage 安全通信；
• ? 所有 showSaveFilePicker 调用必须由用户手势（click/tap）直接触发，且 createWritable() 的 Promise 静默失败是已知行为，需通过架构规避而非错误处理捕获。