本文介绍一种兼容主流浏览器（包括 firefox）的可靠方法：使用 `blob` + `url.createobjecturl()` 将字符串转为可持久访问的纯文本 url，并在新标签页中稳定显示，避免页面闪退或被自动关闭。

在 Web 开发中，有时需要将动态生成的文本内容（如日志、配置、调试信息）快速以纯文本形式展示给用户。一个常见需求是：点击按钮后，在新标签页中打开该字符串，且内容需长期可见（而非瞬间关闭）。原始方案尝试使用 data: URL（如 data:text/plain;charset=utf-8,...），但在 Firefox（尤其是 v105+）中会触发安全策略干预——虽然控制台提示“Storage access automatically granted”，但实际表现为新标签页快速闪退。这是因为现代浏览器（特别是 Firefox）对 data: URL 的生命周期和上下文权限限制更严格，window.open() 打开的 data: URL 页面可能因缺少有效来源（origin）而被主动回收。

✅ 推荐解决方案：使用 Blob 创建对象 URL
该方式绕过 data: URL 的权限缺陷，生成一个具有合法、临时、可跨上下文访问的 blob: URL，浏览器将其视为普通资源，支持长期驻留：

  
  


  
Text Preview Demo
  Open text in new tab

  

? 关键说明与最佳实践：

• ✅ 完全兼容：该方法在 Chrome、Firefox、Edge、Safari（桌面端）均稳定工作，且不受 file:// 协议或本地服务器（如 http://localhost:8000）影响；
• ✅ 编码安全：Blob 自动按指定 charset=utf-8 处理二进制内容，无需手动 encodeURIComponent，避免特殊字符（如中文、换行符、emoji）乱码；
• ⚠️ 内存管理提示：URL.createObjectURL() 创建的 URL 会保留对 Blob 的引用。虽然浏览器通常在关联标签页关闭后自动释放，但若应用需高频创建/打开大量文本（如日志轮播），建议在关闭前显式调用 URL.revokeObjectURL(url)（例如监听新窗口 onunload，或在主页面维护 URL 映射表）；
• ❌ 不推荐回退方案：避免使用 data: URL + setTimeout(revoke...) 组合——它在 Firefox 中不可靠，且 revokeObjectURL() 对 data: URL 本身无效（仅对 blob: URL 有效）。

总结：用 Blob 构建对象 URL 是当前最健壮、语义清晰、跨浏览器一致的实现方式。它将字符串封装为标准 Web 资源，交由浏览器原生机制托管生命周期，从根本上规避了 data: URL 在现代浏览器中的权限与稳定性问题。