使用window.open()与data URI scheme打开计算文档时窗口闪退问题求助

你遇到的问题核心是浏览器安全策略限制，再加上编码方式的小问题，下面直接给出解决方案和原因：

1. 必须在用户交互上下文内调用window.open #

现代浏览器会拦截非用户主动触发的弹窗（比如页面加载时自动执行、定时器触发等场景），这是默认的安全防护机制。你的代码如果不是绑定在点击、按键这类用户交互事件里，新标签页会被浏览器瞬间拦截关闭。

正确示例：把逻辑绑定到按钮点击事件中：

document.querySelector('#generateBtn').addEventListener('click', () => {
  const htmlContent = '<html><body><p>Hello, world!</p></body></html>';
  // 用base64编码避免URI解析异常
  const encodedHtml = btoa(unescape(encodeURIComponent(htmlContent)));
  window.open(`data:text/html;base64,${encodedHtml}`, '_blank');
});

2. 替换encodeURIComponent为base64编码 #

虽然encodeURIComponent理论上可用，但HTML内容中的特殊字符可能导致URI解析异常，而base64编码的data URI兼容性更好，也不容易出现解析问题。

额外优化：大文档场景的替代方案 #

如果生成的HTML文档体积较大（部分浏览器对data URI长度限制在2MB左右），推荐改进你最初的写入方案，通过修改历史记录解决刷新跳转问题：

document.querySelector('#generateBtn').addEventListener('click', () => {
  const w = window.open('', '_blank');
  w.document.write('<html><body><p>Hello, world!</p></body></html>');
  w.document.close();
  // 修改新页面的历史记录，让URL变为独立的空白地址，刷新不会回到原页面
  w.history.replaceState(null, '', 'about:blank');
});

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