如何用window.open()在Next.js中实现多次打开新标签页？

这完全可行，问题出在你调用window.open时使用了固定的窗口名称_blank——浏览器会复用同名的已有标签页，而非创建新标签。要实现每次点击都打开新标签，只需让每次调用window.open时的窗口名称唯一即可。

修改后的代码示例 #

const handleButtonClick = async () => {
  await httpResource();
  // 生成唯一的窗口名称，比如时间戳+随机字符串组合
  const uniqueTabName = `new-tab-${Date.now()}-${Math.random().toString(36).substring(2)}`;
  window.open(URL, uniqueTabName);
};

return (
  <button onClick={handleButtonClick}>
    Button
  </button>
);

原理说明 #

• window.open的第二个参数是窗口名称：如果名称相同，浏览器会找到对应窗口/标签页并加载新URL；如果名称唯一，浏览器会创建新标签页。
• 用Date.now()（当前时间戳）或随机字符串生成唯一名称，能确保每次调用都触发新标签页的创建。
• 注意：因为操作是在用户主动点击按钮的事件回调内执行（即使有await），浏览器不会触发弹窗拦截，无需额外处理。

内容的提问来源于stack exchange，提问作者moonstar-x