如何在JavaScript/React中打开新浏览器实例并设置窗口尺寸？

受浏览器安全沙箱限制，纯前端环境下无法直接启动完全独立的浏览器进程实例，但可以通过window.open的特性参数实现你需要的独立小尺寸弹出窗口效果：

核心实现方法 #

window.open支持传入第三个参数自定义窗口特性，只要配置了宽高、位置等属性，绝大多数浏览器会自动弹出独立窗口而非新标签页：

// 自定义弹出窗口尺寸和位置
const popupWidth = 700;
const popupHeight = 500;
// 计算居中偏移
const popupLeft = (window.screen.width - popupWidth) / 2;
const popupTop = (window.screen.height - popupHeight) / 2;

const newWindow = window.open(
  '你的目标链接地址',
  'customPopupWindow',
  `width=${popupWidth},height=${popupHeight},left=${popupLeft},top=${popupTop},menubar=no,toolbar=no,location=no,status=no`
);

常用配置说明 #

• menubar=no/toolbar=no/location=no：可隐藏弹出窗口的菜单栏、工具栏、地址栏等元素，让窗口更简洁
• 如果你需要让原窗口置于后台，可以在弹出窗口后调用window.blur()让原窗口失焦，同时给弹出窗口调用focus()，不过这个效果完全取决于浏览器的用户配置，无法100%保证所有环境都生效：

if (newWindow) {
  window.blur();
  newWindow.focus();
}

特殊场景说明 #

如果你是在Electron、Tauri等跨端桌面开发环境下，可以调用框架提供的原生API直接启动全新的浏览器实例，纯浏览器环境下出于安全限制没有这个权限，避免恶意脚本随意调用本地程序。

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