在 Electron 中,你可以使用 window.open 函数来创建新的窗口,类似于在浏览器中打开新标签页或新窗口。以下是一个简单的示例:
// renderer.js

document.getElementById('openButton').addEventListener('click', () => {
  // 使用 window.open 创建新窗口
  const newWindow = window.open('new_window.html', 'New Window', 'width=400,height=300');
  
  // 在新窗口加载完成后执行一些操作
  newWindow.onload = () => {
    newWindow.document.getElementById('newWindowContent').innerText = 'Hello from new window!';
  };
});

在这个例子中,当点击一个按钮时,会调用 window.open 函数,打开一个名为 "New Window" 的新窗口,其内容由 new_window.html 文件提供。在新窗口加载完成后,通过 onload 事件可以执行一些操作。

以下是 new_window.html 文件的内容:
<!-- new_window.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>New Window</title>
</head>
<body>
  <div id="newWindowContent"></div>
</body>
</html>

这只是一个简单的演示,你可以根据实际需求定制新窗口的样式和行为。在这个新窗口中,你可以执行一些独立于主窗口的操作。

在 Electron 应用中,window.open 函数的使用方式与在浏览器中的用法基本相同。你可以指定新窗口的 URL、名称、大小等参数。在实际应用中,你可能还需要处理新窗口的生命周期事件、与主窗口之间的通信等。


转载请注明出处:http://www.pingtaimeng.com/article/detail/10914/Electron