Firefox下Angular调用window.open无法打开新标签页及标题缺失问题

问题一：Firefox中打开新窗口而非标签页 #

Firefox对window.open加载data URI的默认行为是触发新窗口而非标签页，原代码里的窗口名设置也进一步影响了浏览器的判断逻辑。

解决方式：

• 使用_blank作为目标窗口名，这是打开新标签页的标准目标值
• 添加noopener,noreferrer特性，既提升安全性，也能引导Firefox以标签页形式打开

问题二：新页面标题缺失 #

直接加载JSON格式的data URI时，浏览器会把它渲染成纯文本页面，没有<title>标签的容身之地，自然看不到自定义标题。

解决方式：

• 把JSON内容嵌入到完整的HTML页面中，在HTML的<head>里添加<title>标签，再通过data URI加载这个HTML内容，还能顺便加些样式让JSON显示更整洁。

修改后的完整代码 #

// 替换成你的实际JSON数据
const result = { /* 你的数据内容 */ };

// 构造带标题的HTML页面，包含格式化后的JSON
const htmlContent = `
<!DOCTYPE html>
<html>
<head>
    <title>RandomName</title>
    <style>
        body { font-family: monospace; white-space: pre-wrap; padding: 20px; }
    </style>
</head>
<body>
    ${JSON.stringify(result, null, 2)}
</body>
</html>`;

// 对HTML内容编码后生成data URI
const dataUri = 'data:text/html;charset=UTF-8,' + encodeURIComponent(htmlContent);

// 打开新标签页并聚焦
const newTab = window.open(dataUri, '_blank', 'noopener,noreferrer');
if (newTab) {
    newTab.focus();
}

关键点说明 #

1. HTML包装：通过HTML页面承载JSON，既能设置标题，还能自定义显示样式
2. 编码处理：用encodeURIComponent处理HTML内容，避免特殊字符破坏data URI结构
3. 窗口参数：_blank+noopener,noreferrer既符合安全规范，也能让Firefox优先打开标签页
4. 弹窗拦截处理：判断newTab是否存在，避免浏览器拦截时出现报错

内容的提问来源于stack exchange，提问作者user18928007