如何在渲染器进程中使用 window.open 在电子中打开新的 window？

Question

我有一个 angular 应用程序，它被包装为电子应用程序。现在，在渲染器进程中我为内部路由调用 Window.open 时，我收到一条消息说 Not allowed to load a local resource 并打开空白 window。我该如何解决这个问题？

preload.js

const { contextBridge, ipcRenderer } = require("electron");

const validChannels = ['sample-event-1', 'sample-event-2', 'sample-event-3'];
contextBridge.exposeInMainWorld(
    "api", {
        send: (channel, data) => {
            // whitelist channels To Main Process
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, data);
            }
        },
        receive: (channel, func) => {
            // From Main Process
            if (validChannels.includes(channel)) {
                console.log('receive: ' + channel);
                ipcRenderer.on(channel, (event, ...args) => func(...args));
            }
        }
    }
);

main.js

        mywindow = new BrowserWindow({
            width: 1024,
            height: 768,
            webPreferences: {
                nodeIntegration: false,
                webSecurity: true,
                allowEval: false,
                allowRunningInsecureContent: false,
                contextIsolation: true, // protect against prototype pollution
                enableRemoteModule: false, // turn off remote
                preload: path.join(__dirname, "preload.js") // use a preload script
            },
            title: this._appTitle,
            autoHideMenuBar: true,
            icon: path.join(__dirname, '/../../favicon.ico')
        });

我尝试过的东西

1. 为 new-window 添加了一个侦听器：没用

myWindow.webContents.on('new-window', (event, url, frameName, disposition, options) => {
  event.preventDefault()
  const win = new BrowserWindow({
    webContents: options.webContents, // use existing webContents if provided
    show: false
  })
  win.once('ready-to-show', () => win.show())
  if (!options.webContents) {
    win.loadURL(url) // existing webContents will be navigated automatically
  }
  event.newGuest = win
});

2. 向创建主 BrowserWindow 的主进程添加了 nativeWindowOpen 标志。: 没有工作

我不想使用 require('electron') 模块或 nodeIntegration:true，因为 material 可用 online/documentation 它增加了安全问题。请推荐！

Answer 1

您在使用 secure-electron-template 吗？您的代码看起来与此类似。 仅供参考 - 我是该库的作者。

您似乎使用了 here 中的示例代码，我的猜测是 win 正在被垃圾回收。尝试在 .webContents.on('new-window' 调用之外创建 win 并查看是否可以解决问题。否则，我建议在电子存储库中发布一个问题——我至少在另一种情况下看到过，他们的文档已过时

Answer 2

如果有人正在寻找答案，下面是我如何解决这个问题的。

根据preload.js我添加了以下操作

const { contextBridge, ipcRenderer, remote } = require("electron");

const validChannels = ['sample-event-1', 'sample-event-2', 'sample-event-3'];
contextBridge.exposeInMainWorld(
    "api", {
        send: (channel, data) => {
            // whitelist channels To Main Process
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, data);
            }
        },
        receive: (channel, func) => {
            // From Main Process
            if (validChannels.includes(channel)) {
                console.log('receive: ' + channel);
                ipcRenderer.on(channel, (event, ...args) => func(...args));
            }
        },
        openNewWindow: (url) => {
            var BrowserWindow = remote.BrowserWindow;
            var win = new BrowserWindow({
                width: 1024,
                height: 768,
                show: true,
                webPreferences: {
                    nodeIntegration: false,
                    webSecurity: true,
                    allowEval: false,
                    nativeWindowOpen: true,
                    allowRunningInsecureContent: false,
                    contextIsolation: true,
                    enableRemoteModule: true,
                    preload: path.join(__dirname, "preload.js")
                },
                autoHideMenuBar: true,
                icon: path.join(__dirname, 'favicon.ico')
            });

            win.loadURL(url.format({
                pathname: path.join(__dirname, url, 'index.html'),
                protocol: 'file:',
                slashes: true,
            }));
        }
    }
);

来自渲染器进程

(window as any).api.openNewWindow(urlToOpen);