本文介绍一种兼容主流浏览器（包括 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，浏览器将其视为普通资源，支持长期驻留：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Open String as Plain Text</title>
</head>
<body>
<h1>Text Preview Demo</h1>
<button type="button" id="btn-open-tab">Open text in new tab</button>
<script>
function openNewTab(text) {
// 创建纯文本 Blob（自动处理换行、编码等）
const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
const url = URL.createObjectURL(blob);
window.open(url, '_blank');
// 注意：无需手动 revoke —— 浏览器会在标签页关闭时自动清理
// 若需手动管理（如大量频繁调用），可在合适时机调用 URL.revokeObjectURL(url)
}
const myText = `Hello!\nThis is an example text.\nJust trying this out...\n`;
document.getElementById('btn-open-tab').addEventListener('click', () => {
openNewTab(myText);
});
</script>
</body>
</html>? 关键说明与最佳实践：
- ✅ 完全兼容：该方法在 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 在现代浏览器中的权限与稳定性问题。
