如何用JavaScript在Firefox及多浏览器中将字符串以纯文本形式持久打开在新标签页？

我之前也碰到过类似的问题，Firefox对直接用data:text/plain格式的URL通过window.open打开新标签页有特殊的安全策略限制，这才导致你遇到标签自动关闭的情况，那个“存储访问自动授予”的提示只是附带的系统日志，和标签关闭没有直接关联。

下面给你两种可靠的跨浏览器解决方案，亲测在Firefox、Chrome、Edge都能正常工作：

方法一：使用Blob URL替代Data URL #

Blob URL是浏览器为Blob对象生成的临时本地URL，相比Data URL，浏览器对它的安全限制更宽松，能稳定保持新标签页的打开状态。

修改你的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>Test open</title>
</head>
<body>
<h1>Test dl</h1>
<button type="button" id="btn-open-tab">Open text in new tab</button>

<script type="text/javascript">
function openNewTab(text) {
  // 将字符串转换成Blob对象，指定纯文本MIME类型
  const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
  // 生成Blob URL
  const blobUrl = URL.createObjectURL(blob);
  // 打开新标签
  const newTab = window.open(blobUrl, '_blank');
  
  // 监听新标签关闭事件，及时释放Blob URL资源
  if (newTab) {
    newTab.addEventListener('unload', () => {
      URL.revokeObjectURL(blobUrl);
    });
  }
}

let my_text_str = "Hello!\nThis is an example text.\nJust trying this out...\n";
let btn_open_tab = document.getElementById("btn-open-tab");
btn_open_tab.onclick = function() {
  openNewTab(my_text_str);
};
</script>
</body>
</html>

这个方法的核心是用Blob和URL.createObjectURL生成合法的本地资源URL，浏览器会正常加载并保持标签打开，同时我们在标签关闭时释放资源，避免内存泄漏。

方法二：通过隐藏的a标签模拟跳转 #

如果第一种方法在某些极端场景下还有问题，可以试试用隐藏的<a>标签来触发新标签打开，这种方式更贴近浏览器原生的跳转逻辑，兼容性拉满：

<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>Test open</title>
</head>
<body>
<h1>Test dl</h1>
<button type="button" id="btn-open-tab">Open text in new tab</button>

<script type="text/javascript">
function openNewTab(text) {
  const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
  const blobUrl = URL.createObjectURL(blob);
  
  // 创建隐藏的a标签
  const a = document.createElement('a');
  a.href = blobUrl;
  a.target = '_blank'; // 指定在新标签打开
  document.body.appendChild(a);
  // 模拟点击
  a.click();
  // 移除a标签
  document.body.removeChild(a);
  
  // 延迟释放资源，确保新标签加载完成
  setTimeout(() => {
    URL.revokeObjectURL(blobUrl);
  }, 1000);
}

let my_text_str = "Hello!\nThis is an example text.\nJust trying this out...\n";
let btn_open_tab = document.getElementById("btn-open-tab");
btn_open_tab.onclick = function() {
  openNewTab(my_text_str);
};
</script>
</body>
</html>

这种方式利用了浏览器对a标签跳转的信任机制，几乎不会被安全策略拦截，非常稳定。

补充说明 #

• 为什么原来的方法不行？Firefox对data:协议的URL通过window.open打开的标签有严格限制，会判定为潜在的不安全跳转，从而自动关闭标签；而Blob URL是浏览器本地生成的资源链接，属于安全范畴内的访问。
• 两种方法都兼容目前所有主流浏览器，包括Firefox 105+、Chrome、Edge等。

备注：内容来源于stack exchange，提问作者sdbbs