创建一个 HTML 链接打开一个新的电子窗口答案

【问题标题】：Making an HTML Link Open a New Electron Window创建一个 HTML 链接打开一个新的电子窗口
【发布时间】：2021-08-05 16:27:37
【问题描述】：

我想让一个 Electron 应用程序有不同的链接，打开其他窗口，但我不知道该怎么做。

从 Stack Overflow 上的其他问题来看，似乎最常见（或唯一）的方法是做类似的事情

<a href="https://somewebsite.com" target="_blank">Open New Window</a>

但初始窗口是由以下内容创建的：

function createWindow() {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    })

    mainWindow.loadFile('index.html')
}

我们是否只以这种方式创建初始窗口？或者我们可以为其他窗口（通过链接或其他内容）这样做吗？

【问题讨论】：

标签： html hyperlink electron

【解决方案1】：

最好在主窗口的webPreference 中启用nativeWindowOpen 以获得原生Chrome 窗口。

然后，单击该链接应该会自动在新窗口中打开。您不需要手动创建自己的窗口。

话虽如此，您可能想要拦截窗口创建并更改有关窗口的各种属性，您可以通过setWindowOpenHandler 来完成

【讨论】：

这会为新窗口中的每个链接打开一个新窗口，还是只为指定“_blank”目标的链接打开一个新窗口？
@JacobHornbeck 您需要指定 _blank 的目标
我应该把nativeWindowOpen 的东西放在哪里...是我在最初的问题中展示的createWindow() 函数中的webPreferences 吗？会不会只是nativeWindowOpen: true？
@JacobHornbeck 是的，两点都正确

【解决方案2】：

您可以使用 shell 命令打开一个外部窗口。这是代码，

<a href="https://somewebsite.com" target="_blank" onClick="open_link()">Open New Window</a>


open_link(event) {
    shell.openExternal(event.target.href);
}

【讨论】：

shell.openExternal(...) 到底是做什么的？
@JacobHornbeck 我相信它将使用默认浏览器打开一个窗口。该窗口不会是电子窗口
@JacobHornbeck 是的，没错，还有另一种方法，例如，如果您不想在每次单击时打开一个新窗口，那么您可以只创建一个窗口并将其隐藏。因此，当您单击 url 时，只需加载 url 并显示窗口。